你將收獲

1. hexo博客搭建
2. github靜態(tài)網(wǎng)站部署
3. 通過github的Action自動(dòng)部署項(xiàng)目

介紹

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. 自動(dòng)化部署
4. 在線編輯

開始

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

tips：初始化超慢... 建議翻墻~

換膚

修改標(biāo)題等配置： _config.yml 文件 修改數(shù)據(jù)序列化格式，白話：項(xiàng)目全局配置，語言，標(biāo)題等

主題樣式：

1. 尋址 - 通過hexo-thme 關(guān)鍵字搜索 用start最多排序，找到受歡迎的主題
2. 替換 - 視頻中用cactues主題，克隆下來，并清理里面的.git(因?yàn)檫@是該主題的git管理),刪除原本的landscape主題，不會(huì)影響
3. 生效 - 然后在項(xiàng)目中配置_config.yml中的theme選項(xiàng)寫成對(duì)應(yīng)的主題名字
4. 顏色 - 如果需要想修改主題內(nèi)部的顏色，可以進(jìn)入到該主題的_config.yml文件進(jìn)行配置colorscheme屬性

部署

整體的目的就是把項(xiàng)目提交到git上后在做配置

github有兩種方式

方式一：https://[username].github.io 倉庫名必須是[username].github.io 打包產(chǎn)物master分支 一般用于主頁

ps:比如我的用戶名是mythxiaoai 那么我創(chuàng)建的倉庫名叫 mythxiaoai.github.io 因?yàn)檫@樣才會(huì)把該項(xiàng)目作為二級(jí)域名下的根，不明白先操作就知道啦~

方式二：https://[username].github.io/[repo] 可以自定義倉庫名稱，打包產(chǎn)物gh-pages分支 一般用于小項(xiàng)目demo

ps:我們所有項(xiàng)目名都可以當(dāng)做靜態(tài)網(wǎng)站訪問的下面的index.html，需要去setttings的GitHub Pages去設(shè)置下，比如說 https://objtube.github.io/front-end-roadmap/#/ objtube[用戶名] front-end-roadmap[倉庫名]

命令行自動(dòng)化部署

1. 建坑 - 創(chuàng)建github上對(duì)應(yīng)的坑位
2. 依賴 - yarn add hexo-deployer-git 添加deply模塊化與git做關(guān)聯(lián)
3. 配置 - _config.yml的deploy文件
4. 執(zhí)行命令 npm/yarn run deploy 把生成的解壓public文件夾下的文件會(huì)全量覆蓋目標(biāo)庫~

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

上面已經(jīng)可以完成通過命令完成博客更新了

github的Action更新后自動(dòng)部署

下面完成的是通過github的Action完成自動(dòng)化部署，就是提交代碼后自動(dòng)發(fā)布，類似webhook

1. 創(chuàng)建一個(gè)my-blog的分支
2. 創(chuàng)建 .github\workflows\deploy.yml ps：windows手動(dòng)創(chuàng)建帶點(diǎn)的文件會(huì)出現(xiàn)特殊字符創(chuàng)建不了 用cmd命令窗口切換到當(dāng)前目錄 運(yùn)行 mkdir .github\workflows\
3. 創(chuàng)建deploy.yml文件 內(nèi)容如下 意思是說 檢查，運(yùn)行什么命令，怎么部署，api文檔在github的每個(gè)項(xiàng)目里面action選項(xiàng)里面有
4. 提交代碼，后 修改下文章后提交my-blog分支，去gitlib上看actions的運(yùn)行是否正常執(zhí)行

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的模板加一個(gè)編輯的超鏈接

<div>
  <a target="_blank" href="你的項(xiàng)目編輯頁面鏈接不要后綴<%- page.source %>">編輯/a>
</div>

方法二：直接在vscode上編輯提交 下載.markdown-all-in-one 插件 可以支持在線預(yù)覽，寫好后 直接提交代碼后更新

視頻地址：https://www.bilibili.com/video/BV1dt4y1Q7UE

看完了嗎~給我這個(gè)稱職的課代表個(gè)贊？哈哈