准备环境

  • node
  • git

两个工具不同的平台安装方法有所不一样，可自行了解按步骤安装，这里不详述了。安装成功后打开git bash（Windowns）或者终端（Mac），下方中将统一称为命令行。 在命令行中输入相应命令验证是否成功，如果成功会有相应的版本号。

git version
node -v
npm -v

安装 Hexo

  • sudo npm install -g hexo-cli

  • 终端cd到一个你选定的目录，执行hexo init命令 hexo init blog //blog是建立的文件夹名称

  • cd blog，npm install //安装npm dependency

  • hexo s //开启hexo服务器，s is short for server

  • 本地浏览器，http://localhost:4000

hello world本地博客创建成功， 文件夹的目录如下：

.
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件
└── themes  # 主题文件夹

部署至github pages

创建github pages repo

登录你的Github帐号，新建仓库，名为用户名.github.io固定写法 以我为例repo name就是zephyrich.github.io 打开网页：zephyrich.github.io 这里就可以看到 README.md 里的内容了。

SSH

要使用 git 工具首先要配置一下SSH key，为部署本地博客到 Github 做准备。

打开命令行输入 cd ~/.ssh 如果没报错或者提示什么的说明就是以前生成过的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以查看本机上的 SSH key 了。

cat ~/.ssh/id_rsa.pub

如果之前没有创建，则执行以下命令全局配置一下本地账户：

git config --global user.name "用户名"
git config --global user.email "邮箱地址"

然后开始生成密钥 SSH key

ssh-keygen -t rsa -C '上面的邮箱'

按照提示完成三次回车，即可生成 ssh key。通过查看 ~/.ssh/id_rsa.pub 文件内容，获取到你的 SSH key

到这还没完，还要登录 Github 上添加刚刚生成的SSH key，按以下步骤添加：

创建一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认创建，搞定！！这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。

首次使用还需要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证明添加成功。

ssh -T git@github.com

Deploy

  • 获取 Github 对应的 Repository 的链接。

    • 登陆 Github，进入到 zephyrich.github.io
    • 点击 Clone or download
    • 复制 URL 待用 我的是 https://github.com/zephyrich/zephyrich.github.io.git

  • 修改博客的配置文件

    • 打开配置文件 ~/Documents/blog/_config.yml （使用 bash 里的 vi 或者 notepad++）
    • 找到 #Deployment，填入以下内容：
deploy:
  type: git 
  repository: git@github.com:zephyrich/zephyrich.github.io.git
  branch: master

注意repo不要用https因为使用ssh auth

  • Deploy

    • 回到 Git Bash
    • 要安装一个部署插件 hexo-deployer-git, 输入 npm install hexo-deployer-git --save 此步骤只需要做一次。
    • 输入 hexo d
    • 得到 INFO Deploy done: git 即为部署成功 之前我们创建的 ReadMe.md 会被自动覆盖掉。

开始写作

博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档可以看 hexo 官网。 新建文章，输入以下命令即可

hexo new 'title'

执行完成后可以在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown 格式的文件，具体用法可以在网上找一下，语法还是比较简单的。

再执行一下以下命令

hexo g //generate缓存和静态文件
hexo s //将生成的网页放在了本地server: http://localhost:4000/

就可以看到你的文章在博客显示了

最后，只要部署到你的 Github 上就可以了！

hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo g -d //generate & deploy, hexo g + hexo d

部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

另外，如果你的文章暂时不发布可以先保存在草稿里面。生成草稿的方法和文章差不多 hexo new draft "title"，生成后会在 /source/_drafts 里看到你的草稿文章。当你想发布时只要执行 publish 命令即可发布到博客。

hexo publish [layout] <filename>

静态图床

比对了几个免费的图床七牛、sm.ms和微博图床，最后我决定选用微博的，七牛的好像最近是测试域名不能用了，sm.ms这个口碑也不错，好像是个人开发的，免费好几年了，有同样的担心就放弃了，最好抱了新浪的大腿，感觉新浪应该会靠谱一点吧，唯一的问题就是如果有一天新浪禁止外链的话就不行了，再看吧。

可以去chrome网上应用商店下载一个叫微博图床的chrome插件，下图是插件的界面，操作简单方便，具体使用看说明就可以啦，比较简单，这样图床的问题就解决了。

本地图片

updates: 2019/07/16

微博图床开始禁止外链，已经不适合继续作为免费图床，考虑到自己的贫穷以及懒惰，也不打算花钱买图床了，直接放本地吧，需要配合npm插件hexo-asset-image：

  • 在配置文件**_config.yml**里修改：post_asset_folder: true
  • 在Hexo安装目录下执行:npm install hexo-asset-image@0.0.2 --save，这是下载安装一个可以上传本地图片的插件
  • 等待一段时间之后，再运行hexo n "文章标题"来生成博文时，/source/_post文件夹中除了文章标题.md外，还有一个同名文件夹。
  • 在新的博文中想引入图片时，可以先把图片复制到博文的同名文件夹，然后在.md中按照常规的方式饮用图片即可，如![你想输入的替代文字](博文标题/图片名.jpg)。注意，此处的图片路径必须使用相对路径
  • 执行hexo g,检查生成的页面中图片的src地址。此时生成页面中图片src地址应该与页面的相对路径一致（具体路径取决于页面路径格式设置）
  • notice: hexo-asset-image最新版本1.0.0对io后缀网址生成路径有bug，在修复前暂时用0.0.2

PicGo + Github

这里推荐一个全平台（基于 Electron）的图片上传工具 PicGo

配合github作为图床的话终于可以解决图床的问题了，唯一的担心是会不会以后被墙，不过有github作备份的话迁移起来成本也不会很高，具体github图床设置见github图床

Theme

更多 Hexo 的主题看这里

这里以 Next 为例。 大概思路就是把整个主题的文件克隆到我们的主题文件夹中。在配置文件中注明使用该主题。

操作如下：

  1. 还是回到 Git Bash。 输入
$ mkdir themes/next
$ curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

  1. 修改博客配置文件

    • 打开 .\blog\_config.yml
    • 找到 theme:
    • 把 Hexo 默认的 lanscape 修改成 next。 即 theme: next
    • 找到 # Site，添加博客名称，作者名字等。
    • 在 language 后面填入 en 或者 zh-CN，选择英文或者中文。
    • 找到 # URL, 填入 url。比如 url: https://ryanluoxu.github.io

  2. 重新生成部署即可

    • 回到 Git Bash。输入 hexo g -d就可以了。 先把修改的内容生成网页，再部署。

同步/多台电脑更新

很惊讶的发现hexo竟然没有一套官方解决方案，自己想下主要就是利用branch或者利用CI自动集成两种方案，明显后者优势更多，但考虑自己更博次数估计很少，还是采用更简单的第一种方法

CI 持续集成 (TODO)

Hexo 博客集成 travis-ci 自动化测试发布

双branch区分环境文件和静态文件

  1. 备份至github

    建立两个branch： master & hexo， 把hexo设为default branch， master branch 放生成的静态文件， hexo branch放环境文件：我们希望hexo分支是空的，并把我们本地的hexo项目与hexo分支关联起来，好把环境文件推送过去

    • github上切换到hexo分支，git clone仓库到本地。

    • 此时本地会多出一个username.github.io文件夹，命令行cd进去，删除除.git文件夹（如果你看不到这个文件夹，说明是隐藏了。windows下需要右击文件夹内空白处，点选’显示/隐藏 异常文件’，Mac下我就不知道了）外的其他文件夹。

    • 命令行git add -A把工作区的变化（包括已删除的文件）提交到暂存区（ps:git add .提交的变化不包括已删除的文件）。

    • 命令行git commint -m "some description"提交。

    • 命令行git push origin hexo推送到远程hexo分支。此时刷下github，如果正常操作，hexo分支应该已经被清空了。

    • 复制本地username.github.io文件夹中的.git文件夹到hexo项目根目录下。此时，hexo项目已经变成了和远程hexo分支关联的本地仓库了。而username.github.io文件夹的使命到此为止，你可以把它删掉，因为我们只是把它作为一个“中转站”的角色。以后每次发布新文章或修改网站样式文件时，git add . & git commit -m "some description" & git push origin hexo即可把环境文件推送到hexo分支。然后再hexo g -d发布网站并推送静态文件到master分支。 至此，hexo的环境文件已经全部托管在github的hexo分支了，在两台电脑之间的同步操作如下：写文章前git pull从远程hexo分支拉取最新的环境文件到本地; 文章写完，要发布时，需要先提交环境文件，再发布文章。按以下顺序执行命令：

git add .
git commit -m "some descrption"
git push origin hexo
hexo g -d

  1. clone至新电脑

    这部分应该要简单一点，如果你已经搭建过一个hexo博客的。

    • 新电脑上安装node和git
    • 安装hexo：npm install -g hexo-cli。
    • 设置ssh，clone远程仓库到本地 git clone git@github.com:username/username.github.io.git。
    • 安装依赖npm install
    • 本地生成网站并开启博客服务器：hexo g & hexo s。如果一切正常，此时打开浏览器输入http://localhost:4000/已经可以看到博客正常运行了。

Reference