Hexo搭建个人博客+切换主题+Github托管+自动构建全流程记录

warning: 这篇文章距离上次修改已过1467天,其中的内容可能已经有所变动。
toc end ->

最近一直在折腾用Hexo搭建博客,目前暂告一段落。

正好把这一段时间的心得记录一下,希望可以帮助到有需要的小伙伴们。

本文主要记录了Hexo个人博客搭建、主题切换、Github托管、自动构建。

首先成果先嘚瑟一下。

HEXO个人博客主页HEXO个人博客主页


Hexo个人博客搭建

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

官网 | 官方中文文档

安装环境

安装 hexo

# 基础环境安装完毕,
# 使用下面的命令安装 hexo 。
npm install -g hexo-cli

初始化 hexo

# 初始化 hexo 目录
hexo init <hexo目录>
# 进入 hexo 目录
cd <hexo目录>
# 安装依赖
npm install

初始化 hexo 目录初始化 hexo 目录

安装依赖安装依赖

hexo 目录说明

hexo #hexo 初始化目录
├── node_modules   # Node.js 依赖安装目录
├── public         # 生成的静态文件存放目录
├── scaffolds      # 模板文件目录
|   ├── draft.md   # 默认模板
|   ├── page.md    # 页面模板
|   └── post.md    # 文章模板
├── source         # 资源目录,用来存放文章源文件
|   ├── _drafts    # 默认页面存放目录
|   └── _posts     # 文章存放目录
├── themes         # 主题目录,存放用来生成静态页面的主题
├── _config.yml    # hexo的配置文件
├── package.json   # hexo的依赖和插件信息
└── package-lock.json # npm已安装依赖的记录(具体来源和版本信息)
info:目前,您只需要简单了解即可,后面会详细说明的。

修改全局配置文件

info:修改_config.yml文件,来配置网站的一些基本信息。
详细可以参考:Hexo 配置文件中文注释

新建页面(文章)

# 新建页面
hexo new page <页面名>
# 新建文章
hexo new post <文章名> #post可以省略

新建页面(文章)新建页面(文章)

info:然后,可以根据个人喜好,使用 Markdown 语法编辑刚才生成的文件。
Markdown 语法参考

编辑文章编辑文章

  • title:文章标题(自动生成)
  • date:文章创建时间(自动生成)
  • categories:分类(手动添加)
  • tags:标签(手动添加)
Error:注意:categories(分类)下表示分类层级,而不是文章属于多个分类。详细请参阅此处:分类和标签

生成&预览

# 生成静态网站
hexo generate
# 也可以简写成
hexo g

# 启动内置服务器,来预览网站,默认访问地址 http://localhost:4000/
hexo server
# 也可以简写为
hexo s

生成&启动本地服务器生成&启动本地服务器

hexo默认主题hexo默认主题

warning:hexo 常用命令总结:传送门

更换 hexo 主题

首先,去挑一个自己心仪的主题:Hexo 官方主题分享页

Hexo 官方主题分享页Hexo 官方主题分享页

然后,将其放到主题目录中。

下载的主题下载的主题

在根据主题说明,安装所需插件,配置主题信息。

主题说明文件主题说明文件

最后,在配置文件中启用主题

配置hexo主题配置hexo主题


Github托管

相关文章:使用阿里云OSS部署静态网站

添加公钥到自己的gitbub账户中

密钥生成,请参考:Linux SSH密钥登录 - 生成密钥

github添加公钥github添加公钥

新建静态网站托管仓库

Error:注意:仓库名必须为 <你GitHub登陆名>.github.io ,每个账号仅能拥有一个静态网站托管仓库

新建静态网站托管仓库新建静态网站托管仓库

配置 hexo 自动部署

info:当然,您可以直接将 public 目录下生成的静态文件提交到仓库。
不过,我们可以通过插件自动完成网站生成部署。(笑

安装 git 自动部署插件

npm install hexo-deployer-git --save

修改配置文件

# Deployment
## Docs: https://hexo.io/docs/deployment.html
#部署部分的设置
deploy:
  type: 'git'
  repo: https://github.com/dingzd1995/dingzd1995.github.io.git #github仓库地址
  branch: master # github分支
  message: '' #自定义提交信息

生成&部署

# 生成&部署
hexo g -d

已push的静态文件已push的静态文件

自定义域名

info:GitHub Pages 自定义域名通过CNAME文件绑定,应存放在仓库根目录下。(仓库设置也可以配置)

此处,在 source 目录下新建此文件,是因为在 hexo 生成静态文件时,会自动生成此文件到网站根目录下

在 source 目录下新建 CNAME文件。在CNAME文件中添加自定义的域名(无需加https://)。

新建CNAME文件新建CNAME文件

添加自定义的域名添加自定义的域名

启用 HTTPS

进入项目设置进入项目设置

启用 HTTPS启用 HTTPS


自动构建

这里使用的是 Travis CI 提供的自动构建服务。

将静态站托管仓库克隆回本地

# clone静态托管仓库到本地
git clone https://github.com/dingzd1995/dingzd1995.github.io.git

新建分支并切换

# 新建并切换分支
git checkout -b source

清理文件

删除hexo自动生成的静态文件(注意保留.git目录)。

master分支master分支

添加hexo源码

将整个hexo目录下的文件复制到此处。(注意删除原来的.git目录)。

source分支source分支

同步代码到github

git add -A
git commit -m '初始化自动部署分支'
git push --set-upstream origin source

同步分支到github同步分支到github

新建 Personal access tokens

新建 Personal access tokens新建 Personal access tokens

Error:注意:token只显示这一次,请妥善保管!

配置 Travis CI

首先访问 Travis CI ,使用github登陆,并授权读取仓库。

配置 Travis CI配置 Travis CI

在 source 分支添加自动构建配置文件

新建 .travis.yml 文件

language: node_js
node_js: stable
before_install:
    - export TZ='Asia/Shanghai' # 更改时区
install:
  - npm install
script:
  - hexo g
after_script:
  - cd ./public
  - git init
  - git config user.name "dingzd1995" #你的名字
  - git config user.email "dingzd1995@foxmail.com" #你的邮箱
  - git add .
  - git commit -m "Travis CI Auto Builder at `date +"%Y-%m-%d %H:%M"` GMT +8:00 ."
  - git push --force --quiet "https://${travis}@${GH_REF}" master:master
branches:
  only:
    - source #监测的分支
env:
  global:
    - GH_REF: github.com/dingzd1995/dingzd1995.github.io.git #提交的地址

享受成果吧

Travis CI 自动构建完成Travis CI 自动构建完成


评论已关闭