Hexo搭建详细教程

最新推荐文章于 2024-05-08 01:25:30 发布

LH_R

最新推荐文章于 2024-05-08 01:25:30 发布

阅读量775

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44719258/article/details/126735232

版权

初始化Hexo

首先需要以下安装环境，直接在官网下载即可

环境准备好后，安装Hexonpm install -g hexo-cli
安装后在指定文件夹创建项目

hexo init <folder>
cd <folder>
npm install

选择主题

Hexo初始化成功后，然后需要选择一个漂亮的主题，这个推荐直接在官网上找，主题
选择主题后下载到项目themes文件夹
然后修改根目录下的_config.yml文件theme: '主题名,也就是themes文件夹里的名字'

hexo最常用的有以下几个命令

启动服务：hexo server或hexo s
新建文章：hexo new "文章名字"
新建静态页面：hexo new page "页面名字"
生成public文件夹：hexo generate或hexo g
清除public文件夹：hexo clean
部署：hexo deploy或hexo d

部署到Github

Github有免费提供搭建静态网站的功能，所以hexo推荐直接放到GitHub Page，按照以下步骤进行部署。

首先新建一个源码repo，建议选择Private，这个用来放hexo项目代码，不对外开放
本地仓库运行以下命令提交代码

git init：git初始化
git add .: 将所有代码添加到暂存区
git commit -m "first commit"：提交本次commit
git remote add origin '远程仓库地址'：添加远程仓库地址
git push -u origin main：推送代码

然后再新建一个仓库，名字为github名字.github.io，这个仓库用于放部署后的代码
安装Hexo部署插件npm install hexo-deployer-git
修改根目录下的_config.yml

deploy:
  type: git
  repo: 部署仓库地址
  branch: main

最后执行hexo deploy命令就可以在github名字.github.io看到博客了

SSH + github Actions自动部署

Github Actions是github专用的持续集成脚本，用于自动执行工作流程，SSH可以通过建立密钥免密登录，这两个结合就能达到自动部署的效果

首先通过ssh-keygen生成密钥，ssh-keygen -t rsa -C "Github 的邮箱地址"
然后github配置ssh，配置路径：github -> Settings –> SSH and GPG keys
git仓库添加密钥私有变量，配置路径：repo -> Settings -> Secrets，点击New repository secret，name可以自定义，主要是接下来的deploy.yaml文件需要使用，Secret填写你生成的密钥
然后根目录下新建.github/workflows/deploy.yaml，并填写以下内容

name: Deploy
on:
  push:
    branches: [你需要自动化部署的分支]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository main branch
        uses: actions/checkout@main
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      - name: Setup Hexo Dependencies
        run: |
          npm install hexo-cli -g
          npm install
      - name: Setup Deploy
        env:
          HEXO_DEPLOY_PRIVATE_KEY: ${{ secrets.'你上一步自定义的变量名' }}
        run: |
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRIVATE_KEY" > ~/.ssh/id_rsa 
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
      - name: Setup Git Infomation
        run: |
          git config --global user.name "git名字"
          git config --global user.email "git邮箱"
      - name: Deploy Hexo
        run: |
          hexo clean
          hexo generate 
          hexo deploy

然后把代码push上去的时候，就可以在仓库的Actions上看自动工作流程的情况

谷歌收录

首先在Google Search Console登录谷歌账号
然后在网址前缀中填写网址，下载验证文件到主题文件夹的source目录
下载后再重新部署一下，最后点击验证

添加站点地图

站点地图是一种文件，您可以在其中提供与您网站中的网页、视频或其他文件有关的信息，还可以说明这些内容之间的关系。Google 等搜索引擎会读取此文件，以便更高效地抓取您的网站。站点地图会告诉 Google 您认为网站中的哪些网页和文件比较重要，还会提供与这些文件有关的重要信息。

安装站点地图插件npm install hexo-generator-sitemap --save
在hexo根目录的_config.yml修改以下内容

url: 博客地址
sitemap:
 path: sitemap.xml

然后部署博客，输入博客地址/sitemap.xml能看见以下内容
最后在Google Search Console上的站点地图上点击提交

Disqus评论

Hexo可以搭载的评论系统有很多，比如Valine，Waline，Disqus等等，但是按颜值来看还是Disqus

首先在Disqus官网进行注册，然后点击“Get STARTED”，并选择 “I want to install Disqus on my site” 选项
然后在进入表单页按照提示进行填写即可，但是有两个地方需要注意，Website Name这个是你的专属网址的名字，需要记住，还有就是在“Select Plan”记得选“Basic”
最后修改_config.yml中把shortname替换为你在创建时的名字，一般现在的主题都带的有评论模版，如果没有就需要自己添加了，这个不同的主题不太相同，可以看下官方的安装模版进行修改