你將收獲

1. hexo博客搭建
2. github靜態(tài)網(wǎng)站部署
3. 通過(guò)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. 在線(xiàn)編輯

開(kāi)始

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

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

換膚

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

主題樣式：

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

部署

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

github有兩種方式

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

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

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

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

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

1. 建坑 - 創(chuàng)建github上對(duì)應(yīng)的坑位
2. 依賴(lài) - 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)庫(kù)~

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

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

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

下面完成的是通過(guò)github的Action完成自動(dòng)化部署谬返，就是提交代碼后自動(dòng)發(fā)布之斯，類(lèi)似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)容如下 意思是說(shuō) 檢查，運(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.

在線(xiàn)編輯

方法一：通過(guò)修改ejs的模板加一個(gè)編輯的超鏈接

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

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

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

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