第一篇博文

文章

发布日期: 2021-11-29

更新日期: 2021-12-05

文章字数: 6k

阅读时长: 23 分

阅读次数:

一、前言

自己搭建此博客花了大概三天时间，前前后后也踩了不少坑。建站后思索着本站的第一篇文章该写什么，最后还是决定写一篇如何搭建个人博客的文章来开启自己的博文写作之旅！

二、博客环境搭建

Hexo 是一个静态博客框架，基于 Node.js，将 Markdown 文章通过渲染引擎，生成一个静态网页，再结合 Git 命令（ssh），Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。话不多说，直接开始 !

1.下载 Git 与Node.js

首先去 Node.js 官网下载 node.js 的安装程序，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。

1.1 Node.js 的安装与配置

Node.js下载以及版本的选择

下载好与电脑系统对应的安装程序后，开始安装流程：

将”I accept the terms in the License Agreement” 前面的复选框勾选，同意安装协议，再点击 Next，进行下一步操作；

选择 Node.js 安装程序的安装位置，在这里我以”C:\Program Files\nodejs” 为例（建议安装在C盘，本身软件也不大），点击 Next，进入下一步操作；

选择安装的模块和功能，这里全部安装，并添加到系统环境变量，继续点击 Next，进入下一步操作；

这一步可以跳过，这个选项的意思是安装一些编译本地模块的工具，点击 Next，进入下一步；

点击”Install”，等待 Node.js 安装完成；

当看到下图所显示的情况，Node.js 就成功安装完毕。

验证安装，并测试 Node.js 是否加入环境变量，当出现如下图的情况，Node.js 安装大功告成。

注意：如果执行 node -v 报错的话，那么手动将 Node.js 的安装路径添加到环境变量中,具体步骤移步CSDN。

1.2 Git 的安装与配置

首先就是去 Git 官网下载 Git，根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。

点击Downloads -> 根据你的系统选择Mac os / Windows / Linux -> 开始下载
接着无脑下一步，直到出现以下安装步骤：

安装Git 对环境变量 PATH 的影响，第一种影响较小，第三种会影响到 Windows 的自带工具，默认勾选中间项，建议不要修改，直接点击 “Next” 继续安装；
选择 Git 在使用 HTTPS 时使用的库，若无特殊需求，可保持默认选项，点击 “Next” 继续安装：
选择提交与拉取记录时，对换行符的处理方式，若无特殊需要，默认选择即可，点击 “Next” 继续安装：
选择模拟终端软件（即命令行窗口软件），若无特殊需要，可默认选择，点击 “Next” 继续安装：
最新功能的询问，若不想尝试尚未保证稳定性的新功能，默认不勾选，点击 “Install” 即可完成安装：
安装完成
回到桌面，点击鼠标右键，会出现两个选项 Git GUI Here 和 Git Bash Here，在打开 Cmd (Win+R)，分别输入 git 和 git --version，如果出现如下图的情况，即安装成功！

2. GitHub 账号的创建以及 Git 的配置

2.1 GitHub 账号的创建

GitHub 账号的创建比较简单，网上也有许多教程，此处便不再赘述

2.2 Git 的配置

配置Git 用户名和邮箱

在桌面点击鼠标右键，点击 Git Bash Here，会出现一个界面如下图所示：

然后分别输入下面的两个命令，并回车：

git config --global user.name "此处填写你注册时的用户名"
git config --global user.email "此处填写你注册时的邮箱"
# 一般只要不报错，可以跳过下面寻找.gitconfig文件

然后找到.gitconfig 文件，文件存放位置在 C:/Users/[username]/.gitconfig（未找到的话，请开启显示隐藏文件的功能），用编辑器打开，看到如下图所示的内容，即配置成功！

配置GitHub

创建：
- 新建一个名为你的用户名.github.io的仓库
- 比如说，如果你的github用户名是test，那么你就新建test.github.io的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 http://test.github.io 了，是不是很方便？由此可见，每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。
注意：
- 注册的邮箱一定要验证，否则不会成功；
- 仓库名字必须是：username.github.io，其中username是你的用户名；
- 仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟，或者更久；
- 创建页面如下：
配置SSH 免密登录

为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。

简单的来说就是给予你当前电脑访问你GitHub 仓库的权限 ~

操作步骤

在 git bash here 中创建一个ssh密钥

指令：cd ~/.ssh

如果本地有的话，它会自动进入到了ssh目录下；

若没有则创建： ssh-keygen -t rsa -C "邮箱" 此处邮箱填写自己的邮箱

然后enter三连

生成两个文件： id_rsa id_rsa.pub 存放在 C:\Users\admin.ssh 文件夹下

注意：pub文件放置的，就是我们的公开的ssh码，也是给管理员这个ssh，让他来添加
在GitHub 或者 Gitee 上添加 SSH key

Title：随意填写

Key：将本地的id_rsa.pub文件用记事本打开，复制全部内容粘贴到GitHub 仓库的SSH Keys 位置

如下图所示：

至此，你的全部环境均以搭建好，接下来让我们快速开始搭建博客吧 ~

三、本地安装 Hexo 博客框架并推送到 GitHub

3.1 博客初始化

命令行安装cnpm （加速以后的插件下载，建议git bash here 处安装）

命令：npm install -g cnpm --registry==https://registry.npm.taobao.org

安装后验证：cnpm -v 出现版本号说明安装成功
命令行安装hexo （安装博客框架）

命令：cnpm install -g hexo-cli

安装后验证：hexo -v 出现版本号说明安装成功
在电脑的某个地方新建一个名为HexoData的文件夹（名字可以随便取），比如我的是D:\JAVA项目\HexoData

这个文件夹将来就作为你存放代码的地方，所以最好不要随便放
在D:\JAVA项目\HexoData 文件夹下右键打开 Git Bash

并依次执行以下命令

hexo init 初始化命令，hexo会自动下载一些文件到这个目录，包括node_modules等

hexo g 生成命令

hexo s 启动服务

说明：hexo s 是开启本地预览服务，打开浏览器访问 http://localhost:4000 即可看到内容，说明博客初始化以及成功！

很多人会碰到浏览器一直在转圈但是就是加载不出来的问题，一般情况下是因为端口占用的缘故，

因为4000这个端口太常见了，只需要关闭4000端口并重新启动即可

到此博客的初始化便完成了，此时你可以本地开启服务并访问，下一步便是推送到GitHub 上！

3.2 将博客部署到 github 个人主页上

第一步：在D:\JAVA项目\HexoData目录下安装 hexo-deployer-git 插件（git bash here 处安装）

命令：npm install hexo-deployer-git --save

说明：必须安装，否则执行hexo d 的话会报错
第二步：编辑D:\JAVA项目\HexoData目录下的 _config.yml 文件, 在文件末尾修改配置文件：
```
deploy:
  type: git
  repo: github上对应仓库的ssh 链接  
    //也可使用https地址，如：https://github.com/Github用户名/Github用户名.github.io.git            
  branch: main
```
说明：仓库的ssh链接如下

切记：分支branch切记修改为 main，之前github的默认主分支为master，现已经改为main ！！！
第三步：在D:\JAVA项目\HexoData目录下, 将本地 blog 推送到 github仓库

输入命令：hexo d

也可能需要输入 username & pwd

推送成功后, 在浏览器中输入对应域名, 即可访问 https://motherkillermaker.github.io/

至此，你便初步搭建好了一个属于自己的博客！（本地服务不用启动依然可以访问）

下一步便是进行博客的美化 ~

此处附加上 hexo 框架常用的指令：

指令说明

hexo clean && hexo g 清除本地项目并重新生成（重新部署时使用）

hexo g 重新生成

Hexo s 开启本地预览

Hexo d 推送到github

指令	说明
`hexo clean && hexo g`	清除本地项目并重新生成（重新部署时使用）
`hexo g`	重新生成
`Hexo s`	开启本地预览
`Hexo d`	推送到github

四、hexo 博客的主题安装以及个性化修改

4.1 主题下载与安装

点击传送门下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。

当然你也可以在你的站点目录文件夹下使用 git clone 命令来下载（推荐）：

直接在D:\JAVA项目\HexoData\themes目录下执行下面的命令（git bash here 处）：

git clone git@github.com:blinkfox/hexo-theme-matery.git 下载完成后便可看到对应的主题文件

4.2 主题的配置与使用

4.2.1 切换主题

注意：首先需要明白什么是站点配置文件，什么是主题配置文件。

站点配置文件就是根目录下的配置文件，比如我的博客文件在 D:\JAVA项目\HexoData 下，那么站点配置文件就是 D:\JAVA项目\HexoData_config.yml，

主题配置文件就是 D:\JAVA项目\HexoData\hexo-theme-matery\_config.yml。

另外注意，配置文件中的标点符号不要出现中文格式的标点符号，不然运行会出错。

主题下载完成后，将站点配置文件中的 theme 值修改为你下载主题的文件名，此处为 hexo-theme-matery，那么值就修改为 theme: hexo-theme-matery

一些站点配置文件的其他地方的修改：

语言选择：如果为中文用户，则在 language: 后添加值 zh-CN，如果不修改，默认为英语；
网址修改：url: 的值为你的网址名，如 http://xxxx.github.io，如果有域名，则修改为你的域名即可;
站点配置文件有个 per_page属性，建议修改为 6 的倍数，这样网站在适应设备时，有较好的显示效果。

4.2.2 创建标签页面（首页的标签选项）

tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下（source目录下右键 git bash here）：
```
hexo new page "tags"
```
编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：
```
hexo new page "categories"
```

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "contact"

编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：

---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的 “菜单” 配置，取消关于留言板的注释即可。

4.2.3 添加emoji表情支持

安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

ithubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用 emoji 语法写的表情了。

4.2.4 代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

4.2.5 开启主页搜索功能

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

4.2.6 开启中文链接转拼音功能

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

4.2.7 开启文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount 插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可：

wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

4.2.8 修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

4.2.9 新增和修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

新增我的CSDN链接

<% if (theme.socialLink.csdn) { %>
    <a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" data-tooltip="关注我的CSDN: <%= theme.socialLink.csdn %>" data-position="top" data-delay="50">
        <i class="fab fa-csdn">CSDN</i>
    </a>
<% } %>

接着你需要在主题配置文件下新增CSDN链接

socialLink:
  qq: 624597867
  weixin: https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/wechat.png
  github: 
  email: 
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  weibo: # https://weibo.com/xxx
  csdn: https://blog.csdn.net/victoryxa  # 新增CSDN链接

4.2.10 添加评论系统

首先去来必力官网，点击导航栏上的安装，会出现如下图的页面：

City 版：是一款适合所有人使用的免费版本；
Premium 版：是一款能够帮助企业实现自动化管理的多功能收费版本。

注册完之后，会提示你填写网站的相关信息，如网站链接，网站名称等等，填写完毕之后，会给你一段代码，如下图所示:
```
# Livere comment configuration, the default is not activated
# Livere 来必力评论模块的配置，默认为不激活
livere:
  enable: true   # true即为开启评论系统
  uid: #这里填写你的uid
```

然后在主题配置文件相关的部署命令，然后查看效果即可。

4.3 自定义修改

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：

菜单
我的梦想
首页的音乐播放器和视频播放器配置
是否显示推荐文章名称和按钮配置
favicon 和 Logo
个人信息
TOC 目录
文章打赏信息
复制文章内容时追加版权信息
MathJax
文章字数统计、阅读时长
点击页面的’爱心’效果
我的项目
我的技能
我的相册
Gitalk、Gitment、Valine 和 disqus 评论配置
不蒜子统计和谷歌分析（Google Analytics）
默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：

4.3.1 修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}
@keyframes rainbow {
    /* 动态切换背景颜色. */
}

Tips：建议使用第三方工具（如IDE）打开css文件，使用查找功能（ctrl + f）来快速定位

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 `` 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

说明： banner图即为你博客主页所显示的图片（默认为 0.jpg ）

4.3.3 修改网站上的相关信息

首先看图：

4.3.4 在关于我页面添加个人简历

打开 theme/matery/layout/about.ejs 文件，大约在 13 行。有一个 `` 标签，找出其对应结尾的标签，大约在 61 行左右，然后在新增如下代码：

<div class="card">
     <div class="card-content">
         <div class="card-content article-card-content">
             <div class="title center-align" data-aos="zoom-in-up">
                 <i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('个人简历') %>
              </div>
                 <div id="articleContent" data-aos="fade-up">
                     <%- page.content %>
                 </div>
           </div>
      </div>
</div>

注意粘贴的位置和空格要正确，这里的位置随你自己设置，你也可以把简历作为第一个 card，然后 /source/about/index.md 下面写上你的简历了（就像写博客一样）。

五、博客的编写以及推送

第一步：创建.md文件

方法1：定位到我们的hexo根目录，Git Bash Here 中执行命令：

hexo new 'my-first-blog' 其中引号内为文章名称

hexo会帮我们在D:\JAVA项目\HexoData\source\_posts 下生成相关.md文件，用这个命令的好处是帮我们自动生成了时间，方法1默认生成如下内容：

title: my-first-blot
date: 2021-11-29 18:21:30
tags:

方法2：当然你也可以直接自己打开D:\JAVA项目\HexoData\source\_posts 目录新建.md文件

第二步：编写并保存

我们只需要用typora打开这个文件就可以开始写博客了，写完后Ctrl+S 保存关闭即可
第三步：清理然后再生成一下，生成后推送到远程仓库即可，hexo根目录下右键Git Bash Here 中依次输入如下命令：
```
hexo clean
hexo g
hexo d 
```
补充：hexo new page 'postName'命令和hexo new 'postName'的区别？

hexo new page 'My-second-blog'最终部署时生成：hexo\public\my-second-blog\index.html，但是它不会作为文章出现在博文目录。

六、总结

搭建该博客花了大概三天时间，写自己的第一篇博文也花了一天时间。希望此博文对各位看官有小小的帮助，今后还会继续更新自己的学习笔记，希望大家多多关注~

后会有期 ~

参考文献：

https://yafine-blog.cn/posts/4ab2.html
https://www.bilibili.com/read/cv12633102
theme-matery 主题官方使用说明 https://github.com/blinkfox/hexo-theme-matery

JYong

http://Motherkillermaker.github.io/2021/11/29/ru-he-kuai-su-da-jian-shu-yu-zi-ji-de-bo-ke/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 JYong !

第一篇博文

分布式入门

2021-12-04 技术

SpringCloud 分布式

本篇

如何快速搭建属于自己的专属博客~

2021-11-29 文章

第一篇博文

如何快速搭建属于自己的专属博客~

一、前言

二、博客环境搭建

1.下载 Git 与Node.js

1.1 Node.js 的安装与配置

1.2 Git 的安装与配置

2. GitHub 账号的创建以及 Git 的配置

2.1 GitHub 账号的创建

2.2 Git 的配置

三、本地安装 Hexo 博客框架并推送到 GitHub

3.1 博客初始化

3.2 将博客部署到 github 个人主页上

四、hexo 博客的主题安装以及个性化修改

4.1 主题下载与安装

4.2 主题的配置与使用

4.2.1 切换主题

4.2.2 创建标签页面 （首页的标签选项）

4.2.3 添加emoji表情支持

4.2.4 代码高亮

4.2.5 开启主页搜索功能

4.2.6 开启中文链接转拼音功能

4.2.7 开启文章字数统计插件

4.2.8 修改页脚

4.2.9 新增和修改社交链接

4.2.10 添加评论系统

4.3 自定义修改

4.3.1 修改主题颜色

4.3.2 修改banner图和文章特色图

4.3.3 修改网站上的相关信息

4.3.4 在关于我页面添加个人简历

五、博客的编写以及推送

六、总结

4.2.2 创建标签页面（首页的标签选项）