Astro-PaperMod
Go back

从Hexo开启第一篇博客

Edit page

前言

本教程基于Hexo博客，Hexo-Fluid主题，Github Pages，阿里云购买域名以及阿里云对象存储OSS实现

目前，笔者的域名已更换，图片未更换，但具体配置方式依旧有效。

{% note primary %}

博客示例 ：www.foolco.de

{% endnote %}

基础步骤：

  • 使用Hexo博客及Fluid主题搭建博客基本框架
  • 通过Github Actions使用Github Pages进行半自动化部署
  • 绑定所购域名（可选）
  • 使用阿里云OSS作为图床（可选Github仓库结合jsdelivr，但国内不稳定，不推荐）
  • 使用Typora进行Markdown写作

使用Hexo博客及Fluid主题搭建博客基本框架

安装hexo

安装使用hexo之前需要先安装Node.js和Git，之后，可以通过以下命令安装hexo:

$ npm install -g hexo-cli

可以通过以下命令查看主机中是否安装了node.js和npm

$ node --version    #检查是否安装了node.js
$ npm --version     #检查是否安装了npm,npm是node.js的包管理工具

执行下列命令，Hexo将会在指定目录中新建工作区

$ hexo init <folder>
$ cd <folder>
$ npm install

层级结构如下：

转到工作文件夹内，建立一个.md文档，使用以下命令：

$ hexo n [layout] <title>

如果添加环境变量总是失败，则使用以下命令：

$ npx hexo n [layout] <title>
# 作为一个程序猿，你该懂得[]里的是可选参数（我一开始也不懂），layout详见Hexo官方注解

现在，你已经拥有第一篇博客文章（的毛坯）了！

具体语法可以使用Markdown语法，并参照{% post_link Hexo写作的基本语法 %}这篇文章

配置Hexo-Fluid

{% note primary %}

具体配置方法请查看官方文档(脚注【^1】)，此处只强调部分注意事项。

{% endnote %}

另外本指南仅包含主题范围内的使用说明，如果是 Hexo 的使用或者 Hexo 插件的使用，请查阅各自的文档。

Hexo 5.0.0 版本以上的用户，在博客目录下创建 _config.fluid.yml 文件，将主题的 _config.yml全部配置（或部分配置）复制过去。

{% note success %}

以后如果修改任何主题配置，都只需修改 _config.fluid.yml 的配置即可。

{% endnote %}

注意：

about:
  icons: # 不要把 icon 注释掉，否则无法覆盖配置
    # - { class: 'iconfont icon-github-fill', link: 'https://github.com' }
    # - { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.webp' }

通过Github Actions使用Github Pages进行半自动化部署

使用 GitHub Action

自己选择作为托管的仓库，建议使用vscode进行git推送，推送之后GithubAction会运行生成GithubPages

GithubAction配置具体步骤如下：

1、生成 SSH Key

 ssh-keygen -t rsa -C "[email protected]"# 自己的Github注册邮箱

生成的文件在 用户名/.ssh 目录中，id_rsa 为私钥文件，id_rsa.pub 为公钥文件。

2、代码仓库的 Actions 页签添加 workflow，如下图：

3、创建的 workflow 为一个 .yml 文件，内容如下：

 name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 18.x
        uses: actions/setup-node@v2
        with:
          node-version: "18.16.1"
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

来自peaceiris/actions-gh-pages无需配置gh_deploy_keys,推荐使用

创建之后进行一次提交，GithubAction会自动运行，生成新的发布分支，默认为gh-pages

4、在仓库的 Settings 的 Pages 项中部署Pages，和域名设置（可选），如下图：

5、域名设置（可选），切换到gh-pages分支，在仓库的根目录下创建 CNAME 文件，内容为域名，如下图：

域名问题

每次提交代码自动构建发布后，GitHub Page 的仓库中配置的域名会丢失。按照如下步骤可以解决：

1、在网站根目录的 _config.yml 文件中找到 skip_render 节点，配置 CNAME ，如下图：

2、在 /source 目录中创建一个文件，命名为 CNAME ，里边的内容为你的域名。例如我的域名为：https://www.foolco.de 该文件的内容为：www.foolco.de 。

3、DNS解析设置：

进入域名DNS解析控制台进行解析设置，前三列按照图片填写即可，注意！记录类型中，A对应@和CNAME对应www不要打乱，不影响使用，但Github会报错（看着难受），后侧记录值，www记录对应GithubPages本来的域名，@记录对应Github的主机，Github的文档里有写，尽量不要按照下列图片写（无法保证实时有效性）。

注：若从腾讯dnspod购得域名，免费版的解析条数只有两条，此时，@型A主机记录只填写任意一条即可，www型CNAME记录不可省，需要填写。

使用阿里云OSS作为图床

（可选Github仓库结合jsdelivr，但国内不稳定，不推荐）

注册,开通对象储存

在阿里云官网注册账户并实名后，进入控制台，选择对象储存OSS开通。

创建bucket

在左侧选择概览，然后在右侧创建一个新的bucket

注意：

Bucket名字不能有大写字母

服务器就近选择

图床选择标准存储

读写权限公共读

创建完成后，你的bucket应该就出现在了左侧

找到你的地域节点，点击你的bucket名，然后点击bucket下的概览，在访问端口一栏找到你的地域节点，如图，只需要复制oss-cn-shanghai即可，不需要后面的.aliyuncs.com

来到右上角，鼠标放在你的头像上，在弹出的框里选择AccessKey管理，得到AccessKeyID和AccessKeyIDSecret并复制。

{% note secondary %}

付费方式：

个人使用建议按量付费，无需购买流量包，账户内少量充值即可。

（开始用的时候每天的用量还不够抹零的，权当白嫖，hhhhhh

{% endnote %}

图床设置

Picgo启动后，在任务栏里找到Picgo的图标，打开主界面，在图床设置里选择阿里云OSS，依照以下步骤填写信息：

设定Keyld：填写刚刚获得的AccessKeyID

设定KeySecret：填写AccessKeyIDSecret

设定储存空间名：填写bucket名称

​ //这里填写的是bucket名称，不是浏览器里的域名

确认存储区域：填写你的地域节点，注意复制的格式

指定存储路径：其实就是自定义一个文件夹的名字，以/结尾

​ //它会自动在你的bucket里面创建一个文件夹，并把图片上传进去

弄完之后，记得“确定”，并点击“设置为默认图床”！

在设置里打开时间戳重命名和上传后自动复制URL

时间戳重命名：以上传时间来重命名图片，避免同名的图片无法上传（该设置不影响本地图片名）

配置Typora

进入Typora主界面，点击左上角的“文件-偏好设置”，选择图像，选择插入图片时上传图片，上传服务选择PicGo(app)，PicGo路径（找到Picgo的安装路径填写），点击验证图片上传选项，提示成功就大功告成辣！

之后在Typora中粘贴图片即可自动上传

使用Typora进行Markdown写作

Markdown就不用教了吧，程序员必备功课，效率神器，跟html和css配合写作简直是绝绝子（手动狗头

Typora建议入正，淘宝正版买断八十块左右，十分值得。

写作流程:

1、使用 hexo n 命令创建博客文章的 .md 文件 ,该文件的所在目录为/source/_posts 目录中；

2、使用 Typora 打开 _posts目录，选择创建的文件进行内容的编辑；

3、文章中如果有图片，直接粘贴到Typora 中，图片会自动上传（设置改为右键选择上传图片也不错），上传成功后地址会自动替换为 阿里云OSS的相应地址；

4、文章内容编辑完成后，在VScode（或GitHub Desktop） 中将修改内容进行提交和推送，GitHub Action 会自动进行网站的生成和部署。

搜索引擎提交与SEO优化

提交到搜索引擎真是一件麻烦的差事，到目前为止，仅仅只有谷歌搜索成功提交，必应和百度都由于各种问题拒绝了我的提交，非必要不太建议折腾，或者直接提交谷歌搜索，简单也高效（晚上提交第二天早上就搜得到，不得不说，老大就是老大），提交界面都有说明，这里就不多赘述了。

总体体验：谷歌＞必应＞＞＞百度

更改全局字体为霞鹜文楷体

打开 Hexo 博客的主题文件夹下的 head.ejs 文件

themes/fluid/layout/_partial/head.ejs

在文件的head标签中添加如下代码，CDN引入字体：

<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css" media="print" onload="this.media='all'">

head.ejs

在主题下的 themes/fluid/source/css，新建一个CSS文件custom.css，添加样式：

html, body, .markdown-body, p {
  font-family: 'LXGW WenKai Screen';
}

custom.css

在主题的配置文件 _config.fluid.yml中查找配置项 font_family，在后面填写字体名称"LXGW Wenkai Screen"，注意要给字体名称加引号。

font-family

部署即可，大功告成！

给博客添加随机一言

首页⌈一言⌋

在主题配置文件修改 slogan 配置的 url 和 keys

# 首页副标题的独立设置
# Independent config of home page subtitle
slogan:
enable: true

# 为空则按 hexo config.subtitle 显示
# If empty, text based on `subtitle` in hexo config
text: ""

# 通过 API 接口作为首页副标题的内容，必须返回的是 JSON 格式，如果请求失败则按 text 字段显示，该功能必须先开启 typing 打字机功能
# Subtitle of the homepage through the API, must be returned a JSON. If the request fails, it will be displayed in `text` value. This feature must first enable the typing animation
api:
enable: true

# 请求地址
# Request url
url: "https://v1.hitokoto.cn/"

# 请求方法
# Request method
# Available: GET | POST | PUT
method: "GET"

# 请求头
# Request headers
headers: {}

# 从请求结果获取字符串的取值字段，最终必须是一个字符串，例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content']；如果返回是列表则自动选择第一项
# The value field of the string obtained from the response. For example, the response content is {"data": {"author": "fluid", "content": "An elegant theme"}}, the expected `keys: ['data','content']`; if the return is a list, the first item is automatically selected
keys: ['hitokoto']

slogan

脚注⌈一言⌋

在主题配置文件中，footer项下添加content2：

  content2: ' <div class="statistics">
 	<a href="https://developer.hitokoto.cn/" id="hitokoto_text"><span style="color: #DDD;"  id="hitokoto"></span></a>
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
 </div>'

footer config

修改themes/fluid/layout/_partials/footer.ejs，添加：

  <!--yiyan footer-->
  <% if (theme.footer.content2) { %>
    <div class="footer-content">
      <%- theme.footer.content2 %>
    </div>
  <% } %>
  <!-- -->

统一字号：

# 修改<div class="footer-inner">为：

<div class="footer-inner" style="font-size: 0.85rem;">

footer.ejs

添加RSS订阅

首先，转到博客文件所在文件夹，安装插件：

npm install hexo-generator-feed --save

install

在_config.fluid.yaml添加以下配置:

feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: " "
  order_by: -date
  icon: icon.webp
  autodiscovery: true
  template:

feed

部分参数解释，其它参数参见作者页面

enable：开启与否
type：输出类型
path：路径
	type: atom
	path: atom.xml
或
	type:
		- atom
		-rss2
	path:
		- atom.xml
		- rss2.xml
limit：包含的文章数量，使用`0`或`false`展示所有文章
order_by：排序依据，默认为`-date`，按日期排序

在关于页面添加订阅链接：

about

show

参考

Edit page
Share this post on:
Share this post via WhatsApp Share this post on Facebook Share this post on X Share this post via Telegram Share this post on Pinterest Share this post via email
Previous Post
Hexo写作的基本语法