Ultranti

春寒料峭,冻刹年少。

Hexo + Github + Netlify 构建持续集成型静态博客

Rhysn's Avatar 2020-04-10 Hexo

  1. 1. 概述
  2. 2. 环境需求
    1. 2.1. Node.js && Git
    2. 2.2. 创建SSH Key && 配置Github
    3. 2.3. 创建Github仓库
    4. 2.4. 安装Hexo
  3. 3. 本地Hexo博客
    1. 3.1. 博客创建
    2. 3.2. 主题安装及配置
    3. 3.3. 查看Hexo效果
  4. 4. Github远程仓
    1. 4.1. 推送范围
    2. 4.2. 本地版本库
    3. 4.3. 推送Github
  5. 5. Netlify持续集成
  6. 6. 后续

概述

使用Hexo + Github + Netlify完成Blog搭建,实现仅通过更改Github中source文件夹内容(博客内容),Netlify自动完成Hexo的部署及发布,使得博客主仅关注于博客内容。

环境需求

Node.js && Git

访问Node.jsGit下载并完成安装。

创建SSH Key && 配置Github

保证本地Git仓库与Github远程仓库的SSH加密传输顺利进行需要在本地环境中创建SSH Key,并在Github中添加公钥。

终端中执行如下命令,其中邮箱应替换成自己邮箱,之后采用默认设置即可(全部回车直到最后)。

1
ssh-keygen -t rsa -C "[email protected]"

创建SSHKey

访问用户目录下的 .ssh 文件夹,内部有私钥文件id_rsa、公钥文件id_rsa.pub,打开公钥文件复制其中全部内容在Github中添加此公钥。

添加公钥

创建Github仓库

Github中创建Blog仓库,本次使用公开仓,选用私有仓库在netlify设置中会有略微不同。

创建GitHub仓库

安装Hexo

终端中执行如下命令完成Hexo的本地安装。

1
npm install -g hexo-cli

安装Hexo

支持全部环境准备完毕。

本地Hexo博客

博客创建

终端中执行如下命令,完成Hexo的博客创建,其中folder为具体目录位置。

1
hexo init <folder>

创建博客

终端中进入folder文件夹,使用命令解决依赖关系。

1
2
cd <folder>
npm install

Ps:Windows需先进入相应盘在进入对应文件夹,以D盘为例。

1
2
3
d:
cd test/
npm install

解决依赖关系

主题安装及配置

Suka为例,按照文档教程完成主题的安装及配置。

为保证主题能够被成功传输到Github中,需删除掉主题文件夹中的.git、.github两个文件夹及.gitignore文件。

查看Hexo效果

终端中执行如下命令:

1
2
hexo generate
hexo server

浏览器访问 http://localhost:4000 查看Hexo运行效果。

Github远程仓

推送范围

访问项目根目录下.gitignore文件,没有直接新建填写如下内容,此部分设置Git忽略文件:

1
2
3
4
5
6
.DS_Store
Thumbs.db
db.json
*.log
public/
.deploy*/

由于需要解决主题中依赖关系,所以从默认设置中删除了node_modules,后续Netlify部分需要使用。

本地版本库

使用终端执行如下命令,创建本地版本库,folder为项目地址。

1
git init <folder>

添加Blog文件并提交事务,命令如下:

1
2
git add .
git commit -m "Hexo Blog"

推送Github

终端执行如下命令,完成向Github的推送,其中”[email protected]:username/repositoryname.git”部分为自己仓库地址。

1
2
git remote add origin [email protected]:username/repositoryname.git
git push -u origin master

完成推送,Github显示结果如图。

仓库结果

Netlify持续集成

访问Netlify授权Github登录,并选择本次使用的Github仓库。

仓库选择

设置部署相关命令,按需设置。

默认

clean

等待netlify完成部署,显示如下。

netlifypublished

访问netlify所生成的网址,显示Blog内容。

blog

后续

之后仅需要变更source/_posts中的内容,即可完成blog内容的更新,Netlify将完全自动化完成Hexo的部署和发布,博主可以只关注文章的编写而无需关心后续的部署等操作。

同时netlify支持变更blog地址,甚至绑定域名,在此不做介绍。

Author : Rhysn
This work is licensed under a CC BY-NC-SA 4.0 International License.
Link to this article : https://ultranti.com/article/hexo_blog_github_host_netlify_cdn/

This article was last updated on days ago, and the information described in the article may have changed.
Loading comments…