史上最全搭建个人免费博客网站教程(使用Github)，从搭建到主题安装到配置一步到位讲解

最新推荐文章于 2023-03-14 14:23:17 发布

KChankc

最新推荐文章于 2023-03-14 14:23:17 发布

阅读量1.8k

点赞数 1

分类专栏： Android以外文章标签：搭建个人博客 Hexo Node.js Git

本文链接：https://blog.csdn.net/weixin_41673312/article/details/88766880

版权

Android以外专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、前言

日常Google中，无意中看到了一个免费搭建个人博客网站的标签，好奇就点了进去看了看，感觉还挺有意思的，就想着自己也搭一个玩玩，当时看的那篇文章说是5分钟就可以搭建完成，的确简单的搭建一下很快，但我配置完再熟悉后已经花了大半天时间了? （期间被学校的网给害惨了，半天都加载不动，还以为自己哪配错了，浪费了不少时间，后来换了自己的热点，嘿嘿，好了?）废话不多说，先给大家看看我搭建完成的博客首页

怎么样？你是否经常看到这样类似的博客？
别着急，接下来我将带领你一步步搭建一个属于你自己的博客网站。

二、开始搭建

1. 创建Github 域名和空间

1.1 创建Github账号

(我想大家身为 程序员 应该都有一个Github账号吧？?)

打开Github官网，点击右上角Sign Up按钮，进入注册页面，按照提示一步一步创建完成后就OK了。
注册界面

1.2 创建Github仓库

点击按钮 New 打开创建仓库页面
注意仓库名为username.github.io ，username即为Owner的名字，必须一致，后缀为.github.io，也是必须的。如我这里Owner为kylechandev，仓库名就为kylechandev.github.io。
后缀.github.io的作用是Github识别到.github.io的后缀就会自动为你开启GitHub Pages，作为你的网站的仓库。

2. 安装必要软件

2.1 安装Node.js

2.2 安装Git

打开Node.js和Git的官网，下载最新版本，一路next安装完成（注意如果出现add to path请勾选，环境变量是必须的。）
安装完成后，打开cmd，输入以下命令检测安装是否成功：
如果出现 ** 不是内部命令的，请查看是否添加对应的环境变量。

2.3 安装并配置Hexo

打开cmd，输入

npm install -g hexo-cli

这样他就会自动帮我们安装Hexo，等待他完成即可(注意保持网络的通畅，不然可能出现和我一样的悲催局面?，注意在这之前一定要确保Node.js已安装成功)。Hexo就是我们这次的核心所在，博客就是基于他完成的。

安装成功后，随便在一个地方新建一个文件夹，用来存放我们博客需要的东西。例如我这里就在D盘下的某个文件夹下创建了一个名为 Hexo 的文件夹。

接下来执行下面的命令来初始化刚刚创建的文件夹(注意这里的Hexo是我的文件夹名，实际按照你自己新建的文件夹名来)：

hexo init Hexo

之后在cmd下进入刚刚创建的文件夹Hexo，直接将光标定位到breadcrumbs后输入cmd后就可以直接定位到该文件夹位置。

输入下面的命令新建建站所需要的文件（这里这里也一定要确保网络的通畅，否则可能会导致失败）：

npm install

等待命令执行完成后，可以发现在新建的文件夹Hexo下多了很多文件(注意这里我是已经弄好后的了，所以我这里的文件会比你现在出现的多一些，别担心，接着往下走)：

3. 开启服务

到这里所有的配置都差不多结束了，最后就是开启服务了。和之前一样，在cmd下进入 Hexo 文件夹，输入以下命令部署并启动服务：

hexo g
hexo s

执行成功后，可以看到如下提示：

然后打开浏览器，在地址栏输入http://localhost:4000/后会出现如下页面：
这就是Hexo博客网站的原生主题界面了。

到这里，整个博客的搭建过程就完成了。

三、博客网站配置

1. 安装主题

你也看到了，原生的主题并不是那么的夺人眼球，所以我们就需要安装一个主题插件，来打造一个漂亮的主页！

Hexo的主题有很多，你可以从这个网站找到很多好看的主题，也可以在这个网站找到很多Hexo的插件，可以根据自己的喜好来挑选，每一个主题也都有安装教程，你可以试着看一看。

这里我安装的一款主题是Yilia，效果还是不错的，个人比较喜欢，主打简约。
所以我就说一下安装这款主题以及这个主题的一些配置吧！

1.1 安装 Yilia 主题

首先通过git命令将 Yizlia 克隆下来（右键新建的文件夹Hexo，选择Git Bash Here，打开Git命令行），使用git命令：

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

等待克隆完毕，找到themes文件夹：
这时我们可以发现在themes文件夹下多了一个 yilia文件，这就是我们刚刚克隆下来的主题了。

返回上一级目录，找到_config.yml文件，打开并修改里面的一些配置以使我们刚刚克隆下来的主题生效。

打开_config.yml文件后，翻到最底下，找到如下图所示位置：修改theme: landscape为yilia，注意theme和yilia之间要有空格，否则无效的。
其中 repo 的值是我们在最开始GitHub中创建的仓库的SSH。打开仓库，在右上角找到clone or download,先点击Use SSH切换到SSH下：然后再点击右边的剪贴本将内容复制下来，粘贴到上面的repo：后就可以了。

1.2 发布

一切就绪，右键Hexo文件夹，选择git bash here，执行以下命令：

npm install hexo-deployer-git --save

之后继续执行以下命令完成最后的发布：

hexo g
hexo d

或一步到位：

hexo g -d

如果你是第一次Git可能会出现一个这个问题：这是因为你的SSH key没有配置好或是根本没有SSH key的原因，可以看看这篇文章来解决这个问题。不要慌，小事情?

完成之后你的个人博客就竣工了?，博客地址可以在Github中查看，点击仓库上方的Setting按钮，进入后往下翻翻就可以看到这个界面：其中的https://kylechandev.github.io/就是你的个人博客地址啦！?

四、发布文章

1. 发布第一篇文章到个人博客

1.1 创建

如图所示操作：
在打开的git命令行中使用以下命令进行创建：

hexo new [layout]

例如：这样就创建了一个名为Test.md的文件

参数说明：

布局（layout）	存储路径	说明
post	source/_posts	默认，可以直接发布
page	source	在source下新建一个文件夹
draft	source/_drafts	新建文件将保持到_drafts中

使用 publish 命令将草稿移动到 source/_posts 文件夹下：

hexo publish [layout]

1.2 写作

打开文件夹 source -> _posts，可以看到你刚刚创建的那个Test.md文件，打开他，你会看到：这就是你要书写文章的地方了，语法为Markdown语法，有关于Markdown语法，不会的请自行百度。
这里我对上面三个参数做一下说明，其中title和date顾名思义，文章标题和日期，而tag对应的就是文章的标签，他需要注意一点，在需要标识多个标签时，使用如下语法：

tags: [tag1, tag2, tag3]

1.3 发布文章

文章写完后对整个目录 Hexo右键执行git bash，
执行 hexo g -d 命令部署并发布文章到服务器上，期间可能会要求输入ssh密码。
届时可查看到网站的文章更新。

五、Yilia配置

最后我在官网的基础之上对 Yilia 主题的配置做一些额外的讲解，以便各位同学迅速完善。

1. 个人信息
打开根目录下的_config.yml文件（注意是根目录下的，而不是yilia下的）：找到以下内容：
title：表示网站title，就是你博客网站首页在浏览器tab里显示的内容
subtitle：对应你个人信息的描述
author：表示你的名字
效果如下（头像稍后解释）：

2. 配置图片资源
图片资源添加位置：themes\yilia\source\img
图片添加完后就可以直接以 \img\图片名 的形式使用，在themes\yilia\_config.yml文件中配置使用，头像的url就是在这里面配置的，具体作者在_config.yml文件中都有详细的注释，并且篇幅有限，我就不贴图了。

3. 解决文章设置折叠无效

问题打开我们的博客主页，发现所有文章都是以全文展开的，这很不利于我们查看，所以我们就需要设置文章折叠起来，而作者给的设置 excerpt_link: more 并没有效果，
解决在 MD 格式的文章正文中插入 < !--more-->(注意把我 ! 号前的一个空格去掉，这里他属于注释我不空一格的话他不显示的)，这样就只会显示它之前的，在此之后的所有内容都不会显示，只有点击文章标题或是查看全文才可以看到剩下的内容。然后我们把themes\yilia\_config.yml文件中的excerpt_link: more 给删掉就OK啦。

4. yilia主题表格的坑
一定要在表格的上下都插入一个空行！！！否则你的表格将不会正常显示出来！！！

5. 增加归档菜单(可选)
修改themes/yilia/_config.yml
将头部修改如下即可：

  主页: /
  归档: /archives/index.html

6. 添加版权信息
效果如下：点击查看教程

7. 修改代码块样式
为什么要修改？原生的显得有些太刺眼啦！? 我们修改成下颜色，这样会显得舒服一些。

首先找到文件theme\yilia\source\main.0cf68a.css，
修改代码背景色，搜索 .article-entry .highlight,，修改background后面的颜色，推荐色值：#282c34
修改代码字体颜色，搜索 .article-entry .highlight .line，修改color，推荐色值：#b6b6b6

8. 插入网易云音乐

登入网易云音乐网页版，选择一首歌，点击歌曲详情，点击生成外链播放器。
复制外链代码，插入你需要编辑的 MD 格式文章里面，即可。

9. 添加访客量统计
集成不蒜子
在 themes\yilia\layout\_partial\after-footer.ejs 最后添加：

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

添加统计网站访问量
修改 themes\yilia\layout_partial\footer.ejs，包括访客数和站点访问总量

# PV方式，单个用户连续点击 n 篇，记录 n 次记录值
<span id="busuanzi_container_site_pv">    本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

# UV方式，单个用户连续点击 n 篇，记录 1 次记录值
<span id="busuanzi_container_site_uv">  本站访客数<span id="busuanzi_value_site_uv"></span>人次</span>

单篇文章点击量
themes\yilia\layout\_partial\article.ejs 中在<%- partial('post/title', {class_name: 'article-title'}) %> 插入如下代码：

<!--显示阅读次数-->
<% if (!index && post.comments){ %>
  <br/>
  <a class="cloud-tie-join-count" href="javascript:void(0);" style="color:gray;font-size:14px;">
  <span class="icon-sort"></span>
  <span id="busuanzi_container_page_pv" style="color:#ef7522;font-size:14px;">
            阅读数: <span id="busuanzi_value_page_pv"></span>次 &nbsp;&nbsp;
  </span>
  </a>
  <% } %>

10. 添加评论系统
点击参考gitalk评论系统

11. 文件说明
.deploy_git 本地库文件
public 最终到服务器上的文件

六、总结

这次的搭建免费个人博客教程到这里就结束了，如果有问题或是不懂的欢迎在下方评论。?

【参考】
Hexo yilia 主题一揽子使用方案
 Github+Hexo搭建个人博客
 用Hexo写出第一篇博客

KChankc

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
史上最全搭建个人免费博客网站教程(使用Github)，从搭建到主题安装到配置一步到位讲解

一、前言日常Google中，无意中看到了一个免费搭建个人博客网站的标签，好奇就点了进去看了看，感觉还挺有意思的，就想着自己也搭一个玩玩，当时看的那篇文章说是5分钟就可以搭建完成，的确简单的搭建一下很快，但我配置完再熟悉后已经花了大半天时间了
复制链接

扫一扫