🍕缘起从零开始搭建hexo博客🍕

本文主要从三方面来介绍：

1. 利用 GitPages+Hexo 搭建个人博客的基础流程：
   • 首先，注册一个 GitHub 账号并创建一个新的仓库，仓库名需要遵循 yourusername.github.io 的格式。
   • 安装 Node.js 和 Git，并在本地环境中配置好。
   • 使用命令行工具安装 Hexo，并初始化一个新的博客项目。
   • 配置 Hexo 的基本设置，如博客标题、作者等信息。
   • 选择合适的主题（如 Next），并进行相关配置。
   • 编写和发布你的第一篇博客文章。
   • 将博客代码推送到 GitHub 仓库，并通过 GitPages 功能将博客部署到线上。
2. 博客自定义及日常使用方法：
   • 更换主题：根据个人喜好，可以选择不同的 Hexo 主题，并根据主题提供的文档进行配置和自定义。
   • 配置自定义域名：将你的博客绑定到自定义域名，可以增加个人品牌和专业性。
   • 编写文章：使用 Markdown 语法编写博客文章，并结合 Hexo 提供的命令进行本地预览和发布。
   • 添加标签和分类：为文章添加合适的标签和分类，方便读者浏览和检索。
   • 使用插件：根据需要，可以安装和配置各种 Hexo 插件，如评论系统、站点统计等。
3. 实现多终端无障碍管理博客的技巧：
   • 使用版本控制：通过 Git 来管理博客代码，可以在多个终端上同步和备份博客内容。
   • 使用云存储：将博客相关的资源文件（如图片）上传到云存储服务，可以在多个设备之间共享和访问。
   • 使用在线编辑器：可以使用像 Typora 这样的在线 Markdown 编辑器，在任何设备上编辑和预览博客文章。
   • 响应式设计：选择一个支持响应式布局的主题，确保你的博客在不同设备上都能良好显示和操作。

# 一、基础博客搭建流程

# 安装 Node 和 Git

要按照下面的顺序一步步安装，每安装完一项，可以在 cmd 工具中通过查看对应版本的方式检测是否安装成功： name --version ，例如： node --version ；只要显示出了版本号就代表已经安装成功。

1. 安装 node.js。建议直接安装 nvm（node 版本管理）nvm 需要以管理员运行 cmd。否则会报错。不建议 Node.js 中文官网下载到桌面按默认路径安装即可；
2. 安装 git。Git 官网或者百度软件中心下载到桌面按默认路径安装即可。
   安装正确的话，在桌面或文件夹空白处鼠标右键菜单会新增 “Git GUI Here” 和 “Git Bash Here” 两个选项。
3. 选装 cnpm。淘宝 cnpm 官网。由于 npm 国内下载速度经常抽风，所以建议安装淘宝的这个镜像；使用方法就是在命令中把 npm 换成 cnpm 即可。
   安装方法：在 cmd 工具中输入如下命令
   npm install -g cnpm --registry=https://registry.npm.taobao.org

# 安装 Hexo 及其相关插件

1. 全局安装 Hexo
   在桌面空白处单击右键，打开 git bash，输入 cnpm install hexo-cli -g ；安装完成后输入 hexo -v ，出现版本信息则表示安装成功。

2. 在项目中安装 Hexo，在桌面打开 git bash，输入 mkdir myblog （在桌面新建了一个名为 myblog 的文件夹），然后输入 cd myblog （进入到这个文件夹里），再依次执行如下操作：

cnpm install hexo --save #在当前项目中安装 hexo；
hexo init #初始化 hexo；
cnpm install #安装依赖包；

3. 安装hexo的插件

```bash
cnpm install hexo-server --save         #搭建本地服务器所需插件
cnpm install hexo-deployer-git --save   #使用git方式进行部署博客所需插件

# 在本地生成博客静态页面并预览

以下皆为 hexo 的指令：

1. 在本地生成静态页面
   hexo generate ，会生成一个存放静态文件的文件夹 public，其简写形式为 hexo g ；
2. 启动本地服务器
   hexo server , 其简写形式为 hexo s ；
   这条指令运行完成后可在本地启动服务器并预览博客，默认网址为 http://localhost:4000/ 。
   如果以上步骤都不出意外的话，你就会看到一个 Hexo 博客初始化的页面。

截止目前，已经成功安装好了一个初始化的 Hexo 博客。但是暂时还只能在自己电脑上看到，如何让别人通过域名可以访问到呢？接下来就要请出今天的另外一位主角 GitHub Pages 了。
另外，以上的安装步骤也可参考 Hexo 官方博客，关于各命令有更详细的解释。

# 创建 GitHub Pages 并配置 ssh

1. 创建博客仓库。
   注册并登陆到 GitHub 官网，假如你注册的用户名是 flechazo，那么新建一个名为 flechazo.github.io 的仓库，注意仓库的用户名一定要是用户名 + github.io 的形式！
2. 本地生成 ssh 密钥。
   git bash 下输入 ssh-keygen -t rsa -C ‘你的邮箱地址’
3. 上传本地的公钥串，使当前电脑与 GitHub 账户建立联系。
   在你的电脑 C：\ Users\你的计算机用户名.ssh 目录下打开刚刚生成的 id_rsa.pub ，复制里面的内容。然后点击你 GitHub 账户右上角的头像，选择 settings，找到 SSH and GPG keys，点击进入之后再点击 New SSH key，title 随便写，把公钥串粘贴到文本框，保存即可。

# 本地博客同步到 GitHub 上

这一步其实就是把本地生成的博客内容（静态页面）放到 GitHub 新建成的仓库 flechazo.github.io 中。

1. 编辑博客配置文件: _config.yml
   在 hexo 根目录（也就是 myblog 文件夹）下找到 _config.yml 文件，把其中的 deploy 参数（没有的话就按如下格式新建，注意冒号后面一定要有一个空格），修改为：

   	deploy:
   	type: git
   	repo: git@github.com:flechazo/flechazo.github.io.git
   	branch: master

2. 重新部署
   在博客根目录下打开 Git Bash，依次执行如下 Hexo 命令：

   	hexo clean #会清除缓存文件db.json及之前生成的静态文件夹public；
   	hexo g #会重新生成静态文件夹public；
   	hexo deploy #因为之前已经安装了插件并且在博客配置文件中也配置好了，所以这个命令会在博客根目录下生成一个.deploy_git的文件夹，并 把本地生成的静态文件部署到flechazo.github.io这个仓库中的master分支上；简写形式为hexo d；

   hexo g 和 hexo d 可以合并在一起写：hexo g -d

3. 在浏览器中访问博客
   在浏览器中输入 flechazo.github.io （可能你已经发现了，这个就是之前新建仓库的名字，同时也是你博客的域名），没毛病的话，你应该可以再次看到那个熟悉又亲切的博客页面了。

至此，我们已经通过 Hexo 创建了一个最原始的博客，并且通过把博客静态文件放到 GitHub 的仓库中，实现了从网上以 GitHub 的默认域名访问这个博客。接下来要做的就是要锦上添花了：换个好看的主题；自定义博客的域名；操作及优化博客。

# 二、锦上添花 & 博客操作

# 锦上添花之更换主题

更换主题主要是两步，先下载主题然后放到博客中的 themes 文件夹（专门用来存放主题）下，再修改主题的配置文件 _config.yml 中相关参数，启用 themes 文件夹下新增的主题。这里用 Next 主题做示例。

1. 下载 Next 主题。
   进入 myblog/themes 文件夹中，打开 Git Bash 面板，输入：
   git clone https://github.com/iissnan/hexo-theme-next themes/next
   把主题包克隆到 themes 文件夹中即可。

2. 启用主题
   与所有 Hexo 主题启用的模式一样。 当 克隆 / 下载 完成后，打开 themes 下的主题配置文件 _config.yml ， 找到 theme 字段，并将其值更改为 next（注意冒号后面要留一个 空格）。

3. 验证主题

   清除并重新生成 hexo 静态文件，启动本地服务器，然后通过

   http://localhost:4000/
   

   预览博客：

   	hexo clean #清除静态文件
   	hexo g #重新生成静态文件
   	hexo s #启动服务器

   如果网络没问题，通过域名访问你的博客也可以看到刚换的新主题了。

关于更换 Next 主题的详细介绍，也可访问 Next 中文官网

# 锦上添花之配置自定义域名

域名注册商可选择 godaddy、万网等，推荐使用万网，速度快，后台介绍简洁明了易上手，大家自行注册。下面以万网注册的域名为例说下如何为博客更换自定义域名。

1. 后台域名解析设置
   进入对应域名的解析后台，添加两条解析记录

2. 在博客目录的 source 文件夹下（myblog/source）创建一个名为 CNAME 的文件，内容为你注册域名。

   CNAME 是不带任何后缀的。

上面操作完毕后，大概过几分钟就可以通过自定义的新域名访问博客了。如果不行，就依次执行 hexo clean hexo g hexo d 再试下。

# 博客操作

1. 新建文章
   hexo new post 背影
   在 Git Bash 中执行上面命令会新建一篇名为‘背影’的文章，源文件会自动生成到 myblog/source/_post 路径下，后缀为.md，直接打开编辑就可以了。编辑完保存，然后再依次执行 hexo clean hexo g hexo d 在博客就可以看到你的文章了（有时候网络问题生成会比较慢，需要等几分钟才可以看到）。

2. 新建页面
   新建标签、分类、关于我等各种页面，并在博客的菜单栏中显示。这里以新建‘标签’页面来做示范。

   • 创建页面。
     在 Git Bah 中执行 hexo new page 'tags' ，会在 myblog/source 路径下自动生成一个名为 tags 的文件夹，里面包含一个 index.md 的文件，在这个文件中添加对应的页面类型 type: tags ：

     	---
     	title: Tagcloud
     	date: 2017-01-01 15:24:23
     	type: 'tags' #声明页面类型
     	---

   • 把页面路径添加到菜单中。
     编辑主题配置文件（themes/_config.yml）, 找到 munu 字段，添加 tag: /tags （格式为 item_name: link ），如下：

     	menu:
     	home: /
     	tag: /tags #‘标签’’页面的路径

   • 设置博客中‘标签’这个菜单项的显示图标。
     同样是在主题配置文件中，找到 nenu_icons 字段，添加 tags tags （格式为 item_name: icon_name ），如下：

     	menu_icons:
     	enable: true #显示图标
     	home: home
     	tag: tags #tag 标签的 icons 是‘tags’

   • 设置博客中‘标签’这个菜单项的显示文本。
     上面的 item_name 并不会直接用于博客界面的显示，只是用来匹配图标和显示在页面上的文字，可以理解为一个桥梁。那么到底在哪里设置呢？
     首先，在博客配置文件中（myblog 下的_config.yml 文件）找到 language 字段，设置为 zh-Hans ；
     然后， 在 themes/next/languages 路径下找到 zh-Hans.yml 文件，在 menu 字段下添加 tag: 标签云 （格式为 item_name: show_name ），如下：

     	menu:
     	home: 首页
     	tag: 标签云 #博客页面就会显示‘标签云’

菜单这块的设置会比较绕，其实主要也就几步，先创建文件夹，再添加路径，然后设置需要显示的图标和文本，只不过文本的设置要到 zh-Hans.yml 这个文件中操作。更详细的步骤请移步官网关于菜单设置的介绍。

# 三、多终端同步管理技巧

如果你使用过云盘或者有 Git 操作的基础，下面的内容会非常好理解。
思路：
需要发布到 GitHub 仓库的静态内容（也就是执行 hexo g -d 之后生成的 public 和.deploy_git 文件夹）放在 master 上，而博客所有其他源文件（除了 public 和.deploy_git）存放到另外一个新建的 hexo 分支（这个分支的名字可以随意取），并且在 GitHub 上将其设为默认分支。
以后所有的操作都会在 hexo 这个分支上进行，操作完之后依次执行 git add . git commit -m 'commets' git push 把所有源文件推到远程仓库的 hexo 分支上（这里远程仓库其实扮演了一个云盘的角色）；即使换了电脑，你可以直接 clone 远程仓库的 hexo 分支到本地或者执行 git pull 下拉更新到本地覆盖现有源文件，就在本地还原了最新的博客内容了。
操作流程
假设你最早是在家里的 A 电脑上搭建了博客，那么 A 电脑的准备工作：把源文件 push 到 GitHub。

1. 初始化仓库
   博客根目录下依次执行：
   git init
git remote add origin <server>

2. 新建并切换到 hexo 分支
   git checkout -b hexo

3. 找到.gitignore 文件（没有的话就在根目录下新建一个）, 在最后增加两行内容：
   /.deploy_git 和 /public

   目的是让 git 不跟踪这两个文件的更新，也就是 push 到 hexo 分支的内容里不会有这两个文件。

4. 把本地新建的分支 push 到远程分支：
   git add .
git commit -m 'commets'
git push -u origin hexo:hexo
   然后再去 GitHub 上把新建的 hexo 分支设置为默认分支。

画面一转，我们到了公司。此时公司 B 电脑上空空如也，那么执行如下操作：

1. 在桌面（或任意地址）执行
   git clone <server> -b <branch>
   这里的 <server> 是你远程仓库的 clone 地址，<server > 就是之前新创建的 hexo 分支，这句话的作用是把远程 < server > 仓库中的 < branch > 分支克隆到本地当前目录。
2. 有了源文件就可以任性修改博客了。修改完之后先生成静态文件发布到博客中：
   hexo clean
hexo g -d
   再把最终保存的源文件 push 到 GitHub，保证多终端可以同步：
   git add .
git commit -m 'comment'
git push

最后画面再切换会家中的 A 电脑，因为此时远程仓库中的博客源文件已经做了更新，而我们 A 电脑上也有之前的源文件，那么只需要下来更新覆盖到本地就可以啦，进入到博客根目录，执行：
git pull

终于可以暂告一段落了，简直完美：）

# 四、总结

• 每次写完博客发布都需要用到的命令
  hexo clean
hexo g -d
• 发布之前，在本地预览博客用到的命令：
  hexo s
• 同步博客需要用到的命令：
  git add .
git commit -m 'comment'
git push
git clone <server> -b <branch>
git pull

# 五、参考资料

• Hexo 官网
• Next 主题官网
• Hexo 在 GitHub 上构建免费的 web 应用