本文介绍使用 Git Node.js Hexo 搭建博客的过程。由于风车车的电脑已经装好了 GitNode.js ,故这里没有对其安装做详细的讲解,直接从 Hexo 的安装开始。后续有时间补上关于 GitNode.js 的相关介绍。

搭建 Hexo 静态博客的前提条件

  1. 下载并安装Git 客户端 传送门
  2. 下载并安装Node.js 传送门

安装 Hexo

  • 在安装好 Node.js 之后,再安装 Hexo 就简单多了,直接利用 Node.j s自带的 NPM 包管理器进行安装 npm install -g hexo-cli 装好后 通过命令 hexo -v 可查看版本
  • pic
    hexo版本信息
  • 创建一个文件夹,cd 进入该文件夹,执行命令 hexo init 初始化,初始化完成后文件夹的目录结构如下:
  • pic
    刚初始化的目录结构
  • 添加过文章,并发布过的目录结构略有不同:
  • pic
    发布过文章的目录结构
  • 对以上目录结构作简要说明:
    • .deploy_git 是 Git 部署用的文件。写好的博客要发布到 GitHub 上去,Git 部署插件会创建这个目录
    • node_modules 文件夹 表示 NPM 安装的所有依赖
    • public 是 Hexo 处理后生成的网站目录
    • scaffolds 模版 文件夹。当你新建文章时,Hexo 会根据 scaffold 来建立文件
    • source 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去
    • themes 主题 文件夹。 Hexo 会根据主题来生成静态页面
    • _config.yml 博客的配置文件
    • db.json 数据库相关的
    • pakeage.json 包含项目所有的 依赖信息 dependencies

建立到远程 GitHub 的联系

  • 首先需要一个Git账号,再创建一个Repository 仓库名必须为:YourName.github.io 其中YourName为你的 Git 账号。
  • 接着本地配置 Git 账户信息(名字和邮箱)
    • $ git config --global user.name "Your Name"
    • $ git config --global user.email "you@example.com"
    • $ ssh-keygen -t rsa -C "your_email@youremail.com" 从新生成秘钥对 查看本地文件id_rsa.pub 或者使用命令 $ cat ~/.ssh/id_rsa.pub 查看公钥。以便在 Github 上新增一个公钥
    • 完成以后,验证下这个 key 是不是正常工作:$ ssh -T git@github.com

修改本地配置文件 _config.yml

1
2
3
4
deploy:
type: git
repo: https://github.com/YourName/YourName.github.io.git
branch: master
  • 其他详细配置 看这里
  • 安装服务器模块 npm i hexo-server
  • 浏览器查看 http://localhost:4000 应该就可以在本地看见效果了
  • 可能出现以上配置都完成后,本地浏览器4000端口不能访问的情况。原因在:4000端口被福昕阅读器所占用。可以换成其他端口 用命令 hexo s -p 5000

Blog 上传至 GitHub

  • 上传之前需要安装 包 hexo-deployer-git 通过命令: npm install hexo-deployer-git --save
  • 通过以下三句命令进行部署:
    hexo clean 清除缓存文件 (db.json) 和已生成的静态文件 (public folder)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。hexo generate 生成静态文件。hexo deploy 部署网站

    1
    2
    3
    hexo clean  
    hexo generate
    hexo deploy
  • 以上命令可简写:hexo c hexo g hexo d 在运行 hexo deploy 部署时可能会要求输入你的 Git 账号和密码

  • 其他详细的指令 看这里
  • 正确的完成以上步骤后,就可以通过地址:http://yourgithubname.github.io 访问到你的博客了。

常用命令总结

  • hexo new postName 新建文章
  • hexo new page pageName 新建页面
  • hexo generate 生成静态页面至 public 目录
  • hexo server 开启预览访问端口(默认端口4000,ctrl + c 关闭server)
  • hexo deploy 将 .deploy 目录部署到 GitHub
  • hexo help 查看帮助
  • hexo version 查看 Hexo 的版本

博客绑定个人私有域名

  • 如果不满足于通过 http://yourgithubname.github.io 来访问你的博客。或者说想让自己的博客更具有个性,可以绑定其他域名。
  • 首先,你得拥有一个域名。你可以去任一家域名注册商去注册一个你喜欢的域名。风车车是在以前的万网注册的,现在变成 阿里巴巴 的了。马云爸爸就是厉害,有钱可以随便买买买。
  • 域名解析,最好解析别名。当然你也可以 ping 一下 yourgithubname.github.io 得到对应的 IP,然后解析A记录为这个 IP 。个人经验解析A记录的话 每次 deploy 时会有如下邮件提醒:
  • pic
    WarningInfo
  • CNAME解析如下所示:
  • pic
    域名解析
  • 在项目的 source 文件夹下新建一个名为 CNAME 的文件,在里面添加你的域名,并在 GitHub 网站对应的仓库的 setting 里面添加域名如下:
  • pic
    Git绑定域名

更改主题以及添加一个评论系统

  • 博客刚搭建好,主题默认为:landscape 可以 去这里 查看其它主题。风车车用的主题是 indigo
  • 博客文章的评论系统 风车车 用的是 Valine 需要去 https://leancloud.cn/dashboard/login.html 注册一个账号,风车车直接用的是 Google 账号,得到 appId 和 appKey 。然后在 indigo 配置文件 _config.yml 里面打开 Valine 的开关 填入appId 和 appKey。再重新部署一下程序就可以看见效果了。
  • pic
    Valine评论插件

博客文章的书写

  • 完成以上步骤后,你可以开始写自己的博客了,并分享给其他人。 具体 MarkDown 语法 看这里
  • 通过命令 hexo new blog_name 新建一篇博客,然后通过 MarkDown 语法在本地书写博客,最后通过hexo c hexo g hexo d 来发布。

    遇到的一些问题

  • 当文章中出现两个打括弧时 生成静态文件时会报错,这个时候,应该将其包含在代码块中