你将收获

1. hexo博客搭建
2. github静态网站部署
3. 通过github的Action自动部署项目

介绍

相关说明\名称	Hexo	VuePress	Gatsby
难易度	1	2	3
技术栈	ejs/stylus	vue/stylus	react/graphQL
主题丰富度	3	1	2
插件	3	1	3
功能性	1	2	3
github stars	30.8k	16.9k	45.6k

hexo:https://hexo.bootcss.com/

vuepress:https://www.vuepress.cn/

gatsby:https://www.gatsbyjs.org/

使用建议

新手 Hexo

Vue VuePress

React Gatsby

自己造轮子~

功能

1. 基本功能
2. github pages
3. 自动化部署
4. 在线编辑

开始

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

tips：初始化超慢... 建议翻墙~

换肤

修改标题等配置： _config.yml 文件 修改数据序列化格式，白话：项目全局配置，语言，标题等

主题样式：

1. 寻址 - 通过hexo-thme 关键字搜索 用start最多排序，找到受欢迎的主题
2. 替换 - 视频中用cactues主题，克隆下来，并清理里面的.git(因为这是该主题的git管理),删除原本的landscape主题，不会影响
3. 生效 - 然后在项目中配置_config.yml中的theme选项写成对应的主题名字
4. 颜色 - 如果需要想修改主题内部的颜色，可以进入到该主题的_config.yml文件进行配置colorscheme属性

部署

整体的目的就是把项目提交到git上后在做配置

github有两种方式

方式一：https://[username].github.io 仓库名必须是[username].github.io 打包产物master分支 一般用于主页

ps:比如我的用户名是mythxiaoai 那么我创建的仓库名叫 mythxiaoai.github.io 因为这样才会把该项目作为二级域名下的根，不明白先操作就知道啦~

方式二：https://[username].github.io/[repo] 可以自定义仓库名称，打包产物gh-pages分支 一般用于小项目demo

ps:我们所有项目名都可以当做静态网站访问的下面的index.html，需要去setttings的GitHub Pages去设置下，比如说 https://objtube.github.io/front-end-roadmap/#/ objtube[用户名] front-end-roadmap[仓库名]

命令行自动化部署

1. 建坑 - 创建github上对应的坑位
2. 依赖 - yarn add hexo-deployer-git 添加deply模块化与git做关联
3. 配置 - _config.yml的deploy文件
4. 执行命令 npm/yarn run deploy 把生成的解压public文件夹下的文件会全量覆盖目标库~

//_config.yml
deploy:
  type: git
  repo: https://github.com/mythxiaoai/mythxiaoai.github.io
  branch: master

上面已经可以完成通过命令完成博客更新了

github的Action更新后自动部署

下面完成的是通过github的Action完成自动化部署，就是提交代码后自动发布，类似webhook

1. 创建一个my-blog的分支
2. 创建 .github\workflows\deploy.yml ps：windows手动创建带点的文件会出现特殊字符创建不了 用cmd命令窗口切换到当前目录 运行 mkdir .github\workflows\
3. 创建deploy.yml文件 内容如下 意思是说 检查，运行什么命令，怎么部署，api文档在github的每个项目里面action选项里面有
4. 提交代码，后 修改下文章后提交my-blog分支，去gitlib上看actions的运行是否正常执行

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
        with:
          persist-credentials: false
      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm install
          npm run build
        env:
          CI: false
      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: master # The branch the action should deploy to.
          FOLDER: public # The folder the action should deploy.

在线编辑

方法一：通过修改ejs的模板加一个编辑的超链接

<div>
  <a target="_blank" href="你的项目编辑页面链接不要后缀<%- page.source %>">编辑/a>
</div>

方法二：直接在vscode上编辑提交 下载.markdown-all-in-one 插件 可以支持在线预览，写好后 直接提交代码后更新

视频地址：https://www.bilibili.com/video/BV1dt4y1Q7UE

看完了吗~给我这个称职的课代表个赞？哈哈