个人博客搭建

关于我如何搭建了自己的个人博客,以及遇到的一些奇怪的问题。
resources: hexo中文官网 & next主题中文官网

前情提要

  • Github Pages + Hexo

搭建Hexo

Nodejs

  • 建议直接官网,上面有足够多和清晰的下载资源
  • 官网慢的话,可以看看自己公司内网的资源,一般前端都会有一个公共的资源库

Hexo

  • 按照步骤,确保已经完成nodejs的安装
  • 执行以下命令安装,如果npm较慢,可以指定国内资源方,一般公司也有
    1
    2
    3
    4
    5
    npm install hexo-cli -g [--registry=http://*]
    hexo init <folder> #新建一个文件夹,作为你的博客目录, 以下以MyBlog代指
    cd MyBlog
    npm install
    hexo server #启动本地服务器, 默认端口4000, 因此可以在(localhost:4000)预览

Theme

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。

  • 主题在官网就有很多选择
  • 我懒,就使用了最常见的Next
  • 直接git clone下来某个主题,并放到MyBlog/themes目录下
  • 在站点配置文件中找到themes关键字,并修改为next
    1
    2
    3
    4
    5
    6
    7
    #克隆最新版本
    cd ~/MyBlog #进入我的博客目录
    git clone https://github.com/theme-next/hexo-theme-next.git themes/next

    #修改主题配置文件
    ## Themes: https://hexo.io/themes/
    theme: next

Github Pages

  • 安装插件

    1
    npm install hexo-deployer-git --save
  • 修改站点配置文件,将功能部署在master分支
    `bash
    deploy:
    type: git
    repo: https://github.com/ding-guohang/ding-guohang.github.io.git
    branch: master

    1
    2
    3
    4
    5
    6
    7
    8

    * 建议将源码保留在另一个分支,例如code
    ```bash
    git init
    git checkout -b code
    git add .
    git commit -m "init code branch for codes"
    git push --set-upstream origin code

绑定域名

  • 我是学前辈在Godaddy上购买的域名
  • 修改Github Pages对应的Repository的Setting,有填写绑定域名的地方
  • 修改域名的DNS配置

    1
    2
    新增/修改一条Type为A的记录,使其Name为@,value为192.30.252.153
    新增/修改一条Type为CNAME的记录,使其Name为www,value为你的Github Pages的地址,例如ding-guohang.github.io
  • 事实上这还是不够的,如果你仔细观察就会发现,当你在github上配置了域名之后,你的master分支上增加了一个叫CNAME的文件,内容只有一行,就是你配置的域名,例如

    1
    www.carryca.com
  • 但是每次你hexo g/d 都会更新master的代码,就需要重新在github上进行配置。因此推荐在当前分支(例如我的code)下,增加CNAME文件

    1
    2
    3
    cd ~/MyBlog/source  #前文已经提到,我的博客目录在~/MyBlog
    touch CNAME
    vim CNAME #编辑内容并保存退出

博客更新

  • 在code分支上进行更新
    1
    2
    hexo generate (hexo g) 
    hexo deploy (hexo d)

Sitemap & RSS

  • 也可以手动在主题配置文件中修改rss的值
    1
    2
    npm install hexo-generator-feed
    npm install hexo-generator-sitemap

一些建议

  • 有一点发自肺腑的建议要告诉大家
  • 一定做好备份
  • 尤其是主题配置文件
  • 没错,我就是没事儿瞎搞,搞ci了没法恢复,又没有备份,只能重新一点点配置的那个可怜虫
  • 我是在source下新建了一个backup目录,每次修改之后把要备份的文件同步过来,然后扔到github保存,以后可能会搞个脚本自动同步吧
  • 这是因为主题是从github克隆下来的,所以它并不能被你提交到你的github上。我建议大佬也可以尝试修改next的.git/config文件,把他搞到自己的仓库上,如果你不准备更新的话
喜欢的大佬,路过赏点儿呗~