建立你自己的个人静态网站

引言本文介绍如何利用 Github Pages + Hexo 搭建自己的个人博客静态网站

Github Pages 可直接从 Github 仓库创建网站

Hexo 是一个快速、简洁且高效的博客框架

我会尽量将建立过程讲述清楚，但清楚并不等于事无巨细，一些基础操作（例如注册账号等）会用简单的一句话略过

搭建Node.js 和 GitNode.JS下载 Node.JS 并安装

验证安装

node -v

npm -v

国内可使用 cnpm 加速

npm install -g cnpm --registry=https://registry.npm.taobao.org

验证安装

cnpm -v

Git/Github下载 Git 并安装

验证安装

git --version

Github 仓库创建 Github 仓库，仓库名称格式为 .github.io

并在 setting 中勾选 githubpage

完成后即可通过 https://.github.io/ 访问

Hexo 配置博客Github Pages 支持 Jelly 和 Hexo 来搭建静态界面，此处选择使用 Hexo 搭建

初始化 Hexo安装 Hexo 并初始化项目，参考 Hexo 官方文档

cnpm install hexo-cli -g

hexo init [target-dir]

cd [target-dir]

cnpm install

完成后指定文件夹目录结构

.

├── _config.yml

├── package.json

├── scaffolds

├── source

| ├── _drafts

| └── _posts

└── themes

静态网页生成静态网页，此命令会在项目根目录下生成 public 文件夹

hexo generate

本地运行静态网页

hexo server

首次运行时会先自动安装 hexo-server，也可手动安装

cnpm install hexo-server --save

启动 Hexo 项目后即可通过 http://localhost:4000 进行本地访问

Hexo 主题（可选）Hexo 默认提供的 hexo-theme-landscape 主题样式简单、功能较少，大多数人都会根据自己的喜好使用其他主题

这里列几个我认为比较有意思的主题：hexo-theme-ocean、hexo-theme-huhu、hexo-theme-fluid、hexo-theme-yun。此外还可以在 Themes | Hexo 发现更多主题或者根据自己的审美偏好开发属于自己的主题（可以参考：hexo-theme-yun 制作笔记）

这里选用最后一个 hexo-theme-yun 来示范如何使用，展示效果

下载主题，在根目录下运行命令

git clone -b master https://github.com/YunYouJun/hexo-theme-yun themes/yun

编辑 Hexo 配置文件 _config.yml

- theme: landscape

+ theme: yun

需要注意的是，有的主题是有额外的依赖要求的，比如此次示范的主题由于使用了 hexo-render-pug 和 hexo-renderer-stylus，需要运行命令安装

cnpm install hexo-render-pug hexo-renderer-stylus --save

该主题的详细使用文档 Docs of Hexo-Theme-Yun，可根据文档进行额外的配置，定制出符合自己喜好的主题

完成后运行 hexo server 重新启动即可看到一个不同主题风格的页面

部署部署到 Github需要先安装部署插件 hexo-deploy-git

cnpm install hexo-deployer-git --save

然后编辑配置文件 _config.yml 添加内容

deploy:

type: git

repo: git@github.com:zhanghanlun/zhanghanlun.github.io.git

branch: master

最后通过命令部署

hexo deploy

or

hexo clean && hexo deploy

保存，部署，完成后即可通过 https://atomicoo.github.io/ 访问

备份与自动部署源码备份以上步骤已将静态文件部署到 Github 上了，但最好将源码也备份一份以防万一（比如误删源码的情况等）

创建新分支 source 用于备份源码，仅首次

git init

git branch source

git branch -v

注意：Git 的初始化仓库必须至少 commot 过一次才会真正创建 master分支，所以以上 git init 之后需要先随便提交一次，比如， git add README.md && git commit -m "first commit"，否则会报错

与 Github 仓库建立连接，仅首次

git remote add origin https://github.com/atomicoo/atomicoo.github.io

提交源码至本地 Git 仓库的 source 分支

git checkout source

git add -A

git commit -m "commit message"

将源码推送至远方 Github 仓库的 source 分支

git push origin source

此处需要输入 Github 用户名和密码

注意：为了避免我们所使用的 Hexo 主题相关仓库的变动导致我们的站点出问题，我们可以自行 Fork 相关仓库然后作为子库调用。这里使用了 git-submodule，参考 Docs of Git Submodule

# git submodule add <远程仓库> <本地路径>

git submodule add -b master https://github.com/atomicoo/hexo-theme-yun.git themes/yun

自动部署如果每次修改都需要人工进行部署的话其实是非常麻烦的，此时我们就可以考虑使用持续集成进行自动部署，比较常用的是 Github Actions，Netlify，Travis CI

具体方案及部署步骤请参考 初探无后端静态博客自动化部署方案 或者 Hexo 官方文档 将 Hexo 部署到 GitHub Pages

若选择使用 Github Actions，可参考我的自动部署脚本 gh-pages.yml

对应的 Github 项目 .github.io 的 Actions 中可查看自动部署的历史情况

至此，个人博客网站基本搭建完成，接下来根据自己的需求与喜好持续完善即可。

写作文章新建博客