GitHub Pages 博客

GitHub Pages 博客

github page + hexo + material-x 搭建博客

github page + hexo

1. 拥有一个Github 账号

2. 创建一个名为 username.github.io 的仓库，username为账号用户名。 具体操作步骤

3. 本地部署 node的环境， https://nodejs.org/en/

4. 本地部署git环境 详情

   1. windows 下载，下一步安装 。 地址 https://git-scm.com/
   2. 初始化信息
      1. git config --global user.name "name"
      2. git config --global user.email "email@163.com"
   3. 连接github
      1. ssh-keygen ,这个命令生成一对公私钥,id_rsa是秘钥 id_rsa.pub 是公钥 ，一路回车执行
      2. 将公钥配置到github上

5. 安装并启动 hexo

   1. 打开shell ，执行npm install -g hexo
   2. 创建文件夹(这里以app为例)，mkdir app , cd app
   3. hexo init ，初始化
   4. hexo install ，安装包
   5. hexo server ,本地启动服务， 打开localhost:4000,hexo本地服务就可以启动了

6. 新建博客文件，利用hexo生成网页

   1. hexo new "new post" ,创建文件
   2. hexo genarater ，生成静态文件

7. 部署到github

   1. 在项目文件夹下找到_config.yml,修改以下配置， 并修改

      1. # Deployment
         ## Docs: https://hexo.io/docs/deployment.html
         deploy:
           type:
         

      2. # Deployment
         ## Docs: https://hexo.io/docs/deployment.html
         deploy:
           type: git
           repo: git@github.com:username/username.github.io.git # 刚才创建的仓库地址
           branch: master     # 分支
           message:   # commit 信息
         
         

8. 自动部署

   1. npm install hexo-deployer-git --save # 安装hexo-deployer-git --save包
   2. hexo delopy # 部署到github
   3. 一键部署 hexo clean && hexo deploy

9. 部署成功

   1. 打开https://username.github.io ，显示正常网页，部署成功

material-x

使用 materialx 替换 hexo 自带模板。

教程 https://xaoxuu.com/wiki/material-x/index.html

其他较好模板

1. 官网收集的模板 https://hexo.io/themes/
2. Suka ， 或许是 Hexo 上最强大的主题
3. Ocean
4. ppoffice http://chempeng.coding.me/chempeng/
5. https://idhyt.github.io/
6. http://blog.minfive.com/

文档

hexo https://hexo.io/zh-cn/docs/

hexo-deployer-git https://hexo.io/zh-cn/docs/deployment.html#Git

materialx https://xaoxuu.com/wiki/material-x/index.html

hexo

在博客根目录的配置文件中：

修改配置 
title
author
favicon  # 网站ico图标
avatar # 作者头像，会出现在文章标题下方，不同于侧边栏的大头像

在主题的配置文件中：

修改网站基础配置 https://hexo.io/zh-cn/docs/configuration

写作 https://hexo.io/zh-cn/docs/writing

​ hexo new [layout] <title>

layout

布局	路径	含义
post	source/_posts
page	source	独立页面
draft	source/_drafts

front-matter https://hexo.io/zh-cn/docs/front-matter

图片资源 https://hexo.io/zh-cn/docs/asset-folders

​ 资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

命令

1. hexo generate 使用 Hexo 生成静态文件快速而且简单。
   1. hexo generate --watch 可以加速生成
2. hexo deploy 生成+部署
   1. hexo d 简写

materialx

wiki

hexo-theme-vuex

+django

​ https://github.com/Bgods/Django-blog-material-x

评论系统是valine。https://valine.js.org/

后续

操作有些复杂，背离了原始初衷，第一次尝试 github page 放弃。