前言

手把手搭建个人博客系列教程-二: 主要完成个人博客搭建中博客文章的生成和发布

参考文档:

环境与工具

  • 操作系统：Windows 10
  • VSCode编辑器

创建本地博客

建立个人博客的一般流程都是本地创建博客，平时书写更新文章都在本地完成，修改确认完成后发布到远端网站上线，因此建立博客的第一步就是在本地建立博客并测试
本教程中采用Hexo作为博客网站的框架，在框架上搭建自己的博客能大大减少繁杂的工作量，同时分析和使用别人完善的框架也能给自己以后搭建框架提供启发和参考
Hexo 是一个简洁、简单的常用博客框架，其使用 Markdown 等渲染引擎解析文章，在几秒内快速渲染主题生成静态网页，下面是创建并部署一个简单博客的步骤：

  1. 在本地选一个自己要放置管理博客文件的位置创建个人博客文件夹，命名随意，最好不要放C盘，占空间

  2. 在博客文件夹里右键选择git bash调出git bash终端，或者在VSCode中 左上角File->Open Folder->选中博客文件夹->打开，运行Terminal终端，注意看Terminal命令行确保显示的是自己的博客文件夹路径

  3. 在终端用hexo init命令进行hexo初始化，自动安装相关依赖，初始化完成会提示Start blogging with Hexo!

  4. 在终端用hexo install命令进行安装配置

  5. 初始化项目完成后，自动生成的本地博客文件目录详解如下，只有了解了文件目录之后在美化网页时才能找到对应美化文件的含义和路径：

    目录/文件 描述
    node_modules 依赖包
    scaffolds 生成文章的模板
    source 存放文章及页面文件
    themes 主题文件
    _config.landscape.yml 主题配置文件，两个 . 中间的是主题名
    _config.yml 博客的全局配置文件
    package.json 项目名称、描述、版本等信息

    于此同时，source文件夹作为博客主要内容来源，也要了解其中目录：

    目录 描述
    _data YAML或JSON格式的数据文件
    _posts 将发布的文章
    _draft 文章草稿

  6. 在终端运行命令

    1
    hexo generate

    或者其缩写形式 hexo g 命令在hexo站点根目录生成public文件夹

  7. 在本地部署博客，可以方便调试和预览部署效果，在终端使用命令

    1
    hexo server

    或其缩写命令 hexo s 启动本地服务器，默认本地访问地址是http://localhost:4000/ ，4000指的是端口号，在浏览器中使用此地址就可看到本地部署的网页
    特别地，如果本地端口4000被占用或者不想使用4000端口或出现 EADDRINUSE 错误，可以使用 -p 选项指定本地服务器的地址端口，以端口5000为例：

    1
    hexo server -p 5000

  8. 终止本地部署
    经过我的测试，在不同的终端进行本地博客部署其终止方式也不太一样

    • 在VSCode终端：在VSCode终端停止本地部署直接用 Ctrl+C 命令就能终止，终止成功会显示一个再见问候
    • 在git bash：
      1. 在git bash终端要停止服务使用在git bash窗口用 Ctrl+C 命令不起作用，需要重新打开一个终端用下面命令查看目前4000端口(根据自己实际采用的端口为准，默认是4000端口)的使用情况： 
        1
        netstat -o -n -a | findstr :4000
      2. 找到服务所在的进程，用下面命令关闭进程： 
        1
        taskkill /F /PID 3628
        注意3628指的是服务所在PID号，每个人可能不同，要看步骤1查找出来的条目内容

部署到远端仓库

当我们在本地调试好博客内容，经过本地部署预览后就可以部署到远端仓库了，为方便之后的博客部署，我们配置一个项目自动部署发布工具，以后就能直接通过命令 hexo d来一键上传部署博客到远端，下面是具体步骤：

  1. 在本地博客文件夹，记事本打开_config.yml配置文件，在最底部将deploy项配置为： 
    1
    2
    3
    type: git
    repository: git@github.com:username/username.github.io.git
    branch: main
    • 配置项的缩进与默认的type保持一致
    • repository项的配置内容为github上个人博客的仓库地址，在github博客仓库首页点击code，复制ssh选项中给出的git开头的仓库地址，粘贴到repository处即可
  2. 配置自动部署发布工具，在本地博客文件夹打开git bash窗口，使用下面命令安装自动部署发布工具 
    1
    npm install hexo-deployer-git --save
  3. 上传并部署到远端GitHub博客仓库
    1. 使用命令hexo clean删除之前生成的静态文件，如果之前未生成过静态文件可忽略此条
    2. 使用命令hexo generate或简写命令hexo g生成静态文件
    3. 使用命令hexo deploy或简写命令hexo d部署文章

注：

  • 用hexo d部署文章时由于之前配置过ssh，所以首次使用会用ssh登录，也可能需要输入GitHub的用户名和密码
  • 当出现Deploy done: git提示时说明部署成功，等待一分钟左右，在GitHub的个人博客页面（GitHub的用户名.github.io）就能看到本地博客已经部署成功的页面了
  • 步骤1、2都是首次使用时进行的配置，之后的远端部署只用执行步骤3所说的命令即可，而且在VSCode终端中还可以用下面简化命令一次完成清理、生成、部署的操作： 
    1
    hexo clean && hexo g && hexo d

博客文章生成

当然建立博客后的首要工作是学会如何写博客文章并发布

生成博客模板文章

在本地博客文件夹中打开git bash终端或者直接使用VSCode的Teerminal，通过下面命令创建一篇新文章或者新页面

1
hexo new [layout] <title>

layout参数可直接忽略不写，默认是 post，当然我们也可以在博客根目录的 _config.yml 全局配置文件中的配置项 default_layout 来指定默认的layout方式

layout参数

layout参数是来指定创建的文件类型，可选变量如下：

布局 生成文件路径 描述
post source/_posts/ 文章
page source/ 页面
draft source/_drafts/ 文章草稿

默认layout参数为post，相应的生成的文章在路径 source/_posts/ 保存，生成文章名字为<title>.md ，title是生成文章时指定的title参数，编辑此文件书写博客文章即可，例如：

1
hexo new markdown教程

执行后我们能在 source/_posts/ 路径下找到一个 markdown教程.md 文件，这个就是生成的文章文件，直接编辑即可

title参数

Hexo的title参数默认使用标题作为创建的文件名称，当然我们可以在 _config.yml 中通过修改new_post_name参数来改变默认的文件名称，举个例子，将参数设置为:year-:month-:day-:title.md可让我们更方便通过日期来管理文章，类似占位符还有：

变量 描述
:title 标题(小写，空格将替换为-)
:year 创建时年份，如，2024
:month 创建时月份，如，01
:i_month 创建时月份，如，1
:day 创建时日期，如，01
:i_day 创建时日期，如，1

草稿 draft

平时写文章一般是边写边修改，最好能打个草稿，Hexo为我们提供了这个功能就是上面介绍layout参数时提到了一种特殊布局： draft ，这种布局方式会将建立的文件保存在 source/_drafts/ 路径下，默认不会显示到页面中，当然在本地预览时可以在执行时在命令最后加上 --draft 参数或者是在_config.yml 中将 render_drafts 参数设置为 true 来预览草稿
草稿文章完成后，可通过下面命令将草稿文件移动到发布文章路径 source/_posts/ 下

1
hexo publish [layout]<title>

模板 Scaffold

在新建文章时，使用创建文章命令后，Hexo会根据scafflods文件夹内的模板文件来建立文章文件，默认有post.md，page.md，draft.md 三个模板文件分别对应文章、页面、草稿三种，当然你也可以自定义模板，步骤如下：

  1. 在scaffolds文件夹中创建模板文件，例如photo.md
  2. 填写模板内容，可以使用的变量：
    变量 描述
    layout 布局
    title 标题
    date 文章建立日期
  3. 使用自定义模板创建文章，第一个参数为模板名，例如： 
    1
    hexo new photo "myphoto"

Hexo支持的书写格式

Hexo不仅可以用markdown书写文章，只要安装了相应的渲染插件，用任何格式都可书写文章，默认的可以用Markdown和EJS写作，这两个都是Hexo安装后自带的，相应的文章扩展名也要对应为md或者ejs渲染器才会渲染，常见的书写格式：

书写语言 渲染器
Markdown hexo-renderer-marked
EJS hexo-renderer-ejs
Pug hexo-renderer-pug

博客文章的部署和发布

在编辑完成后保存文件，在终端窗口中先用hexo clean命令清除上次生成的静态文件，再用hexo g生成新的静态文件，通过hexo s本地部署预览，确认没问题后用hexo d发布博客文章到远端仓库网页，出现Deploy done: git提示时说明部署成功，等待一分钟左右，在GitHub的个人博客页面（GitHub的用户名.github.io）就能看到本地博客已经部署成功的页面了

注意：请在部署到远端之前务必在本地部署预览一下，因为不同的编辑器使用的Markdown渲染工具不尽相同，可能在我们的编辑器里的渲染效果和部署在网页上的效果不一样，要注意修改