前言

博客搭建-博文书写与发布: 主要完成个人博客搭建中博客文章的生成和发布

参考文档:

环境与工具

  • 操作系统：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：在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. 配置自动部署发布工具，在终端使用下面命令安装自动部署发布工具

    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或用户名密码登录。
  • 当出现Deploy done: git提示时说明部署成功，如果访问GitHub的个人博客页面（GitHub的用户名.github.io）还不能看到部署成功的页面，等待一会儿就好了。
  • 步骤1、2都是首次使用时进行的配置，之后的远端部署只用执行步骤3所说的命令即可，而且在VSCode终端中还可以用下面简化命令一次完成清理、生成、部署的操作： 
    1
    hexo clean && hexo g && hexo d

博客文章生成

至此你已经完成了发博客文章前的所有准备工作，下面我们来看如何写博客文章并发布。

生成博客模板文章

VSCode打开本地博客文件夹，在终端用下面命令创建一篇新文章或者新页面：

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为我们提供了方便的布局方式： draft ，这种布局方式会将建立的文件保存在 source/_drafts/ 路径下，默认不会显示到页面中。
你可以在本地终端通过命令 hexo s --draft 参数来预览草稿，或者是在_config.yml 中将 render_drafts 参数设置为 true 来默认预览草稿。

草稿文章修改完成后，可通过下面命令将草稿文件移动到发布文章路径 source/_posts/ 下

1
hexo publish [layout]<title>

例如：hexo publish markdown教程

模板 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

markdown语法学习可以在本站页面右上角搜索markdown教程。

博客文章的部署和发布

  1. 保存文件确保要发布的文章在_post目录
  2. 在终端窗口中先用hexo clean命令清除上次生成的静态文件，
  3. 再用hexo g生成新的静态文件
  4. 通过hexo s本地部署预览，在浏览器中打开http://127.0.0.1:4000/来预览。
  5. 确认没问题后用hexo d发布博客文章到远端仓库网页，出现Deploy done: git提示时说明部署成功。

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