hexo建站搭建流程

  1. 下载并安装 Visual Studio Code, 官方下载

  2. 下载并安装 Nodejs, 官方下载

    1
    2
    node -v
    npm -v

    npm 镜像源修改为 淘宝NPM镜像

    1
    npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. 下载并安装 Git, 官方下载

    1
    2
    3
    #配置名字和邮箱
    git config --global user.name "test"
    git config --global user.email "test@.com"
  1. 安装 Hexo, 官方文档

    1
    2
    cnpm install -g hexo-cli
    hexo -v

    初始化博客目录

    1
    2
    3
    4
    cd D
    hexo init blog
    cd blog
    cnpm install

    启动服务器,本地预览

    1
    hexo server
  1. Hexo 常用站点配置_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #网站标题
    title: test
    #作者昵称
    author: test
    #站点描述[签名]
    description: 站点描述
    #网站地址
    url: http://www.test.com
    #文章的链接格式
    permalink: :title.html
  2. 添加标签

    1
    2
    3
    4
    #生成文件路径 source/tags/index.md
    hexo new page tags
    #编辑index.md,添加type
    type: "tags"
  3. 添加分类

    1
    2
    3
    4
    #生成文件路径 source/categories/index.md
    hexo new page categories
    #编辑index.md,添加type
    type: "categories"
  4. 文章添加标签与分类

    1
    2
    3
    4
    5
    categories:
    - hexo
    tags:
    - hexo
    - github
  5. 设置阅读全文

    1
    2
    #在文章中使用 <!-- more --> 手动截断 
    <!-- more -->
  6. Hexo 主题,这里选择 Next, Github地址 文档
    安装 Next 主题

    1
    git clone https://github.com/iissnan/hexo-theme-next themes/next

    启用主题并设置语言,站点配置

    1
    2
    theme: next
    language: zh-CN

    主题常用配置,themes/next/_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    #主题外观设定
    scheme: Gemini
    #设置菜单
    menu:
    home: / || home
    tags: /tags/ || tags
    categories: /categories/ || th
    archives: /archives/ || archive
    #设置代码高亮主题
    highlight_theme: night eighties
    #添加友情链接
    links:
    test: http://www.test.com
    #文章自动添加版权声明
    post_copyright:
    enable: true
    #返回顶部按钮显示百分比
    sidebar:
    scrollpercent: true

    设置RSS,安装hexo-generator-feed

    1
    cnpm install hexo-generator-feed --save

    安装hexo-generator-searchdb,添加百度/谷歌/本地 自定义站点内容搜索

    1
    cnpm install hexo-generator-searchdb --save

    启用搜索,主题配置

    1
    2
    local_search:
    enable: true

    配置搜索,站点配置

    1
    2
    3
    4
    5
    search:
    path: search.xml
    field: post
    format: html
    limit: 7777

    设置favicon.ico,将favicon.ico上传至站点根目录/source 目录下,主题配置

    1
    2
    3
    favicon:
    small: favicon.ico
    medium: favicon.ico
  7. 部署Hexo至Github
    安装 hexo-deployer-git

    1
    cnpm install hexo-deployer-git --save

    站点配置

    1
    2
    3
    deploy:
    type: git
    repo: https://github.com/github账号/github账号.github.io.git

    生成并部署

    1
    hexo d -g
  8. Github 自定义域名,由于Hexo每次部署到Github都会覆盖Github的域名配置,所以直接在Hexo配置,然后再部署,在根目录下的source目录下新建CNAME文件,无后缀名

    1
    2
    #自定义域名
    xxx.com
  9. 解析域名到 github.io,记录类型 = CNAME, 记录值 = github账号.github.io

  10. 码云新建一个项目, 路径 https://gitee.com/test/test.git

  11. Hexo 目录说明

    1
    2
    .deploy_git Hexo默认的.git配置文件夹
    public 根据source文件夹内容自动生成
  12. 进入 Hexo根目录,执行以下命令,先删除 themes/next 目录下的 .gitignore 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #初始化仓库
    git init
    #添加远程主机
    git remote add origin https://gitee.com/test/test.git
    #添加目录下所有文件,不包含 .gitignore 声明的文件
    git add .
    #添加更新说明
    git commit -m "hexo first commit"
    #推送更新到云端服务器
    git push -u origin master
  13. 创建 test 目录,将 Git 的内容同步到本地并安装Hexo

    1
    2
    3
    4
    5
    6
    7
    mkdir test
    cd test
    git init
    git remote add origin https://gitee.com/test/test.git
    git fetch --all
    git reset --hard origin/master
    cnpm install
  14. blog 目录是A电脑, test 目录是B电脑, 更新文章后的同步操作:

    1
    2
    3
    4
    5
    6
    7
    8
    #A电脑修改了 test.md,添加更新说明并推送到远程仓库,使用git status查看状态会显示刚刚更改过的文件状态
    git commit -m "update test.md"
    git push origin master
    git status
    #B电脑同步更新
    git pull origin master
    #可以通过指定当前目录工作分支与远程仓库分支之间的链接关系
    git branch --set-upstream-to=origin/master master
  15. hexo 数据文件,通用配置文件,新建 source/_data 目录, 主题的配置可以在此目录下配置,以 Next 主题为例,在此目录下新建 next.yml, 则 next.yml 的配置会覆盖 themes/next/_config.yml 的相同配置

坚持原创技术分享,您的支持将鼓励我继续创作!