【Blog】Mac上搭建基于GitHub的Hexo博客

先前书写CSDN、简书等平台,到后来购买云虚拟主机、ECS、也都尝试搭建自己的一套Blog系统,Wordpress、自己打包上传build包等形式都已尝试过。越往后越觉得累,也觉得没有这个必要了。主要原因还是自己的服务器需要各种安全防御,否则各种病毒和蛀虫就开始肆虐了,有段时间因为工作忙,等准备写文章的时候发现,服务器已经宕机了。更有意思的是,有一次因为自己忘记续费,也没有快照,然后……你懂得……,所以后来就想着用Github托管可能会好一点。

环境配置

Hexo官网对环境配置已经描述的很清楚了,我就不搬砖了

初见Hexo

全局安装hexo

1
npm install -g hexo-cli

有的文章命令是$ sudo npm install -g hexo,都可以安装,没有影响。

初始化

终端cd到一个你选定的目录,执行初始化命令:

1
hexo init blog

blog是最终建立的文件夹名称。cdblog文件夹下,安装对应的node包:

1
npm install

开启hexo服务器

1
hexo server


补充:hexo shexo server的一种简写

打开http://localhost:4000在本地预览界面

关联Github

  1. 使用vim或者直接用编辑器打开blog根目录下的_config.yml文件,修改如下配置(在文件最下方)

注意:repository是在github上已经初始化的项目地址

  1. 在blog文件夹下生成静态页面

    1
    hexo generate		或者:hexo g

    补充:hexo ghexo generate的一种简写

  2. 配置/部署

    1
    hexo deploy

    补充:hexo dhexo deploy的一种简写

注意:若执行命令报错:无法连接git或找不到git,则执行如下命令来安装hexo-deployer-git

1
npm install hexo-deployer-git --save        

再次执行hexo d即可

  1. 鉴权github

生产

  1. 在blog文件夹下,执行新建文章命令

    1
    hexo new "helloworld"

    文件类型是markdown,文件地址在/blog/source/_posts目录下

  2. 发布文章

    1
    hexo g
  3. 部署

    1
    hexo d

    以上基本上就完成了博客的搭建和生产内容的基本设施。

补充:新建-部署文章三步走

1
2
3
$ hexo clean		//清除缓存文件 (db.json) 和已生成的静态文件 (public)
$ hexo g //生成缓存和静态文件
$ hexo d //重新部署到服务器

主题

要想页面漂亮并规范一点,可以配置个主题。我们一般在Hexo官网中搜索喜欢的主题,我们以NexT主题为例。

把主题下载到blog/themes/next目录下

1
$ git clone https://github.com/iissnan/hexo-theme-next

修改_config.yml里的themenext

主题的名称、描述等属性修改在blog/themes/next/_config.yml文件中,具体可参考文档

绑定域名

如果觉得github的二级域名使用不方便,我们可以通过绑定自己的一级域名来直接访问(实际上就是做了一次CDN跳转)

  • /blog/themes/next/source目录下新建文件名为CNAME的文件(注意没有后缀名),直接将自己的域名如:idbeny.com写入。

  • 和发布文章一样,三步走即可(clean - g - d)

  • 添加解析

记录类型 主机记录 解析线路 记录值 TTL
CNAME @ 默认 idbeny.github.io. 10分钟

注意:记录值idbeny.github.io.结尾有一个点.

快速访问

Github是国外网站,所以我们在天朝访问的时候总是有点慢,甚至有时候打不开,这时候我们就可以把文章同时部署到国内的托管平台(码云 | Coding等)。同时也能够保证突然某一天其中一个平台的大变动(当然,不管是哪一种,一定要在本地备份,一定要在本地备份,血的教训……)。

  1. 首先到码云上注册并新建一个项目(步骤同Github),项目名称和用户个性后缀相同(方便二级域名访问博客),然后配置Gitee Pages服务;

  2. 直接点击启动即可(需要绑定手机号,如果没有绑定,不能启动)

  3. 启动完成后,会提示已开启服务

  4. 打开本地blog目录下的_config.yml文件,修改如下(之后的步骤和Github一致):

  5. 部署三步走(clean - d - g

  6. 域名解析

记录类型 主机记录 解析线路 记录值 TTL
CNAME @ 海外 idbeny.github.io. 10分钟
CNAME @ 默认 idbeny.gitee.io. 10分钟

如果是Coding平台,还需要到blog/source目录下新建Staticfile文件(名字必须是Staticfile),其他步骤都基本一致。

至此,Blog系统搭建完毕。

友情链接

NexT官网 | Hexo官网