搭建个人博客

Posted on | In |

本篇日志记录如何使用 hexo 来部署个人博客到 github pages, 并构建编辑器的过程。

0x0 原理

  1. github pages
    github pages 官网介绍

    • github pages 是github为github用户提供的免费的静态页面空间，它与github repo是挂钩的。

    • github pages 有两种， a) 给用户用的, 比如我的github用户名是 chenjiancan，github 主页是 https://www.github.com/chenjiancan/, 那么，创建一个repo名称为 chenjiancan.github.io, 它便可以和 https://chenjiancan.github.io 站点挂钩； b) 是给项目用的，比如我有一个repo名字是 myrepo, 那么，为 myrepo 创建一个名字为 gh-pages 分支，它就与 https://chenjiancan.github.io/myrepo 站点挂钩。

    • 上面说的挂钩，就是github page的魔法了，当你做好设置后，访问 https://chenjiancan.github.io，github 就会帮你解析到对应 repo，并从改repo拉去静态页面； 比如我在 https://www.github.com/chenjiancan/chenjiancan.github.io 下放置一个 index.html 文件，内容为：

      1
      Hello World!

      当我访问 https://chenjiancan.github.io/index.html 时浏览器就会显示 Hello World!

      这样，我们可以用 github pages 这个功能来写文章，每片文章就是一个 html 文档，不过，如果这样子效率一定很低，而且你肯定希望你的博客有统一且漂亮的样式 ——— 这就是 hexo 的作用了。

  2. hexo
    (hexo 官网介绍)[https://hexo.io/]
    hexo 是一个基于 nodejs 的开源项目，用于生成静态网页，同时驱动了一个基于hexo的博客主题、插件的社区。

    Markdown 格式受很多博客作者青睐，很多开源项目的人 README 就是 Markdown 格式。hexo 支持我们使用 Markdown 写作，帮我们把 Markdown 文本生成 html 文档和静态资源（图片等），并组织成一整个站点，结合hexo主题，就可以把日志包装成一个漂亮的博客站点。

    我们的仓库是 host 在 github 的， hexo 支持 git 方式进行部署。

0x1 准备工作

将会用到 git、nodejs、npm、hexo、ssh 等工具。以下以在 ubuntu 环境下的操作介绍，由于 这些工具都有跨平台实现，基本都是一样的。

  1. 创建github repo，并设置启用 github pages
    以用户 page 为例
    用户名是 jack, 则创建名为 jack.github.io 的仓库

    进入设置页
    setting

  2. 安装 nodejs
    在本地pc安装nodejs
    安装指定版本的 nodejs, setup_ 后面跟版本号， 直接打开签名的链接去看说明
    curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
    sudo apt-get install nodejs

  3. 安装hexo
    sudo npm install -g hexo-cli

0x2 创建本地博客

hexo 使用文档

  1. 初始化
    hexo init blog
    创建一个hexo工程，blog 是创建的文件夹的名字，随意
    目录结构：

    其中，_config.yaml 是配置文件，大部分设置都会在这个文件里编辑；
    source/ 目录将是我们文章的源文本和静态资源所在的地方
    .deploy_git/ 是生成静态站点源码的地方，它是一个 git repo，最终就是将他同步到 github repo的

  1. 新建日志
    hexo new mypost
    创建了一个名为 mypost 的日志，位于 /source/_post/ 下，以日期作为归档

    我们编辑 mypost.md， 输入 

    ## Hello World

  2. 生成站点
    hexo g

  3. 本地部署
    hexo s
    默认将在 http://localhost:4000/ 启动web服务，可以打开看看，不出一个外，你会看到我们创建的文章列表

  4. 部署到 github pages
    接下来就需要配置关联 github repo了
    编辑 _config.yml，找到 deploy 部分，编辑为对应的github repo，如：

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

    别忘了配置你的 git ssh 公钥到 github！

    以下命令自动部署站点到 github pages
    hexo d

  5. 开始体验
    打开 https://chenjiancan.github.io 进行浏览

0x3 然后呢

现在我们有一个博客了，本地写写 markdown 日志，就能推送到github pages。
虽然这个系统已经可以用来了，但是只在机械的用命令行创建日志，编辑markdown，生成站点，部署站点未免太枯燥，博客主题可能不合胃口，文章也要版本管理吧。
没错，我们还要继续折腾。

0x4 博客主题

hexo 工程目录下 theme/ 目录用来存放安装的主题，可以从 https://hexo.io/themes/ 找到喜欢的主题对应的 github repo， 直接clone 到 theme下面，就可以使用该主题，eg:
git clone https://github.com/klugjo/hexo-theme-clean-blog.git themes/clean-blog
配置 _config.yml， 找到 theme， 配置为
theme: clean-blog
重新生成，done!

Note: 具体主题的配置请浏览对应的github 仓库说明。

0x5 使用 VSCode 编辑，发布日志

很多编辑器支持 Markdown 格式的编辑，预览，我也尝试了很多，现在我推荐 VSCode，你可以使用任何你喜欢的。

  1. 安装 Visual Studio Code (VSCode)
    https://code.visualstudio.com/
    VSCode 默认已经支持 Markdown 语法和预览
    快捷键： ctrl+k, v

  2. 安装 Paste Image 拓展
    Paste Image
    使用 Markdown 的朋友都知道插入图片可以变成一个麻烦的事，我们使用过富文本编辑器都习惯复制粘贴来插入图片， Paste Image 这个插件就满足我们这个需求。
    我们需要配置拓展，指定图片要保存的目录以及url相对地址等属性

VSCode 的配置有三个层面：
1） 全局用户配置，影响用户的所有工程
2） 工程配置，针对具体工程有效，会覆盖重叠的全局配置，保存在工程配置文件 .code-workspcce 文件的 settings 中

3）目录配置，只在从特定目录打开有效，保存在目录下的 .vscode/settings.json 中

因为博客的设置是相对特殊的，所以最好为 source 目录创建一个 VSCode 工程，并在工程配置里配置， File -> Preference -> Settings 就会打开三个配置的编辑界面。 

{
    "folders": [
        {
            "path": "."
        }
    ],
    "settings": {
        "pasteImage.path": "${projectRoot}/img/${currentFileNameWithoutExt}",   # 配置图片保存在 source/img/文字名字/ 路径下
        "pasteImage.basePath": "${projectRoot}",  # 配置()内 url 的相对路径的基准路径
        "pasteImage.forceUnixStyleSeparator": true,
        "pasteImage.prefix": "/"   
    }
}

现在，我们就可以测试从浏览器 copy image，在编辑器里使用快捷键 ctrl+alt+v 进行粘贴的。
正常情况下，你将会看到
"![](/img/搭建个人博客/2018-08-11-23-34-00.png)" 这样的格式链接变粘贴

现在我们就可以愉快的写文章了！

#0x6 变得更懒
你没有猜错，VSCode 还有 hexo 插件，安装 vscode-hexo ，就能在 VSCode 内部进行 hexo 的命令操作。
Ctrl-Shift-P 唤起命令输入入口， 以下命令可以使用

  • hexo init # Initializes a website
  • hexo new # Creates a new article
  • hexo generate # Generates static files
  • hexo publish # Publishes a draft
  • hexo server # Starts a local server
  • hexo stop # stop a local server(Ctrl-C)
  • hexo deploy # Deploys your website
  • hexo clean # Cleans the cache file (db.json) and generated files

#0x7 总结
终于，我们折腾出了一个集成博客编辑器，它有如下特点：

  • 以 VSCode 作为交互界面
  • 以 Markdown 作为文章格式
  • 依托于 hexo 进行静态站点生成和部署
  • 托管在 github pages 和 github 上

更多打开方式，请自行探索吧。