博客搭建记录

发表于 更新于 分类于

日志

  • 更换主题为Next（由于Melody主题未知BUG无法正确生成一些页面而不得不替换）
    并升级hexo到5.x版本
    2021年9月27日17:03:21
  • 初次搭建完成时间
    2018年1月24日15:40:16
  • 更换主题为Melody
    2018年7月5日15:03:55

基本步骤记录

这是一篇笔记，记录如何通过Github Pages和Hexo搭建个人博客的过程。包含完整的配置记录。

参考教程：《2018，你该搭建自己的博客了！》

Hexo是什么

Hexo是一个快速, 简洁且高效的博客框架. 让上百个页面在几秒内瞬间完成渲染. Hexo支持Github Flavored Markdown的所有功能, 甚至可以整合Octopress的大多数插件. 并自己也拥有强大的插件系统.

之所以使用github和hexo来搭建，是因为这种方式几乎是最快捷以及适合新手搭建个人博客的方式。Github Pages省去了自己搭建服务器的烦恼；Hexo帮你完成你的博客的外观（有许多漂亮的主题可以选择）。你只需要简单的配置即可轻松搭建一个漂亮的个人博客。

基本准备

  • Github账号
  • Node.js
  • Git客户端
  • Github SSH密钥和本地仓库
  • Hexo

前4项不再过多赘述，参考搜索到的教程即可。

安装和使用Hexo

安装Hexo

  • 在本地磁盘任意地点新建文件夹（用于存储站点源文件，如D:/Work/Blog/Hexo）
  • 进入文件夹，右键点击空白处选择Git Bash Here
  • 在弹出的git bash窗口中输入以下命令安装Hexo：
    1
    2
    3
    4
    5
    6
    # 安装Hexo
    npm install hexo-cli -g
    # 初始化Hexo目录
    hexo init
    # 安装Git部署器
    npm install hexo-deployer-git --save
    安装完成后可以看到目录结构如下：

建立Github Pages项目

  • 打开自己的Github新建项目：
    （项目名称要求格式：xxxxx（github用户名）.github.io）
  • 打开刚才建立的项目，点Clone or download，点击Use SSH，然后复制链接

将Hexo站点源码提交到Github Pages项目

  • 用文本编辑器打开hexo根目录下的配置文件_config.yml（yml是yaml格式的文件后缀）
  • 找到deploy:修改为如下内容并保存：
    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: xxx #刚才复制的SSH链接
      branch: master
    #注意每个字段的冒号后边必须有一个空格，且缩进靠空格不靠tab
  • 在Git Bash窗口中（定位为博客源码根目录，如D:/Work/Blog/Hexo）输入命令：
    1
    2
    3
    4
    #生成静态文件
    hexo g
    #部署（提交）站点源码,可能会要求输入github账号密码
    hexo d
  • 在github查看项目源代码，如果部署成功，即可在浏览器地址栏输入链接http://[你的github用户名].github.io/访问你的博客了

本地编辑和预览博客

  • 写文章的方式是在博客根目录打开bash输入以下命令：（建议使用此方式）

    1
    hexo new "这里填写文章标题"

    生成的文章文件名为标题.md，文章使用markdown编写。建议这里输入的文章标题只有英文字符或数字，博客页面显示的文章标题在文件内通过标题字段单独设置。
    生成的文件位置在博客根目录可以看到的source/_posts/目录下，用任意文本编辑器打开即可编辑。

  • 修改文章内容或者修改hexo配置之后，输入以下命令进行本地预览：

    1
    2
    3
    4
    5
    6
    #清除缓存和生成的静态文件（可选，如果遇到只读取缓存没有更新的情况可以使用）
    hexo clean
    #重新生成静态文件
    hexo g
    #启动本地服务器
    hexo s

    启动本地服务器后，在浏览器输入http://localhost:4000/访问本地博客预览效果

安装主题

  • 在Hexo官方网站的主题页面可以选择喜欢的主题进行安装，如图：
  • 点击图片可以打开预览页面，点击标题进入相应的Github项目页面。
  • 这里我选择了Material，在博客的themes目录下打开git bash，输入命令：
    1
    git clone xxx #(主题的github项目地址)
  • 克隆完成后可以将主题的文件夹名称改短，这里改为material，起一个简短的名称即可（这个名称用于在站点配置文件中切换主题）
  • 打开站点配置文件_config.yml，找到theme字段，修改它的value为上一步的主题文件夹名称，这里为material。
  • 按照之前所说的命令预览效果：

站点配置

  • 站点的基本配置参考Hexo配置，有些设置会以主题的配置为准（视具体的主题而定，一般第三方主题都有参考手册）