Hexo-搭建博客

119 阅读2分钟

知识

  • 基本功能
  • Github pages
  • 自动化部署
  • 在线编辑文章

使用hexo

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

修改config

  • 标题
  • 作者
  • 中文 zh-CN

更换主题

  • 克隆主题 到themes文件夹下
  • 使用下载的主题在主目录下的 theme cactus
  • 它自己的_config colorscheme white

部署到GitHub上

  • github 来部署站点两种方式
    • https://[username].github.io 仓库名必须为[username].github.io 打包产物master分支(更适合部署博客)
    • https://[username].github.io/[repo] 可以自定义仓库名 打包产物gh-pages分支(开源项目,作品或者demo的展示)
  • 想安装 yarn add hexo-deployer-git的依赖 会帮助我们将代码部署到一个具体的分支。之后再根目录的config文件拉到最下面
type:git
repo:项目地址
branch:master

然后运行npm run deploy 来运行我们的代码 代码就提交到了我们的远程仓库 就是public目录下的文件

自动化部署功能

  • 先把源代码提交到github上, master已经被占用了,我们提交到新的分支
  • 创建并切换分支 git checkout -b akingblog
  • git add . git commit -m "feat: 搭建完成" (推到远程,并创建) git push --set-upstream origin akingblog
  • 使用github 的一个功能github actions 和settings是一排的。actions的功能是帮你构建测试部署,也可以做code review 分支管理
  • 在项目里创建一个yml 放在.github/workflows/deploy.yml
  • 然后提交代码到akingblog 分支就好了

在线编辑

  • 直接在github修改,提交完也会触发部署
  • 根据GitHub在线的修改url规则,我们可以在makedown当中添加跳转按钮
  • 找到该主题的模板文件 layout/post.ejs 添加编辑按钮
  <div>
    <a href="https://github.com/WeiaiKing/weiaiking.github.io/edit/akingblog/source/<%- page.source %>"
      target="_blank">编辑</a>
  </div>