史上最全搭建免费个人博客网站教程(使用Github)，从搭建到主

作者: 会超能力的橙子 | 来源:发表于2019-04-26 17:59 被阅读521次

一、前言

日常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，作为你的网站的仓库。

github_pages.PNG

2. 安装必要软件

2.1 安装Node.js

2.2 安装Git

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

check_success.PNG

如果出现 ** 不是内部命令的，请查看是否添加对应的环境变量。

2.3 安装并配置Hexo

打开cmd，输入

npm install -g hexo-cli

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

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

create_local_repo.PNG

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

hexo init Hexo

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

create_local_repo_remind.PNG

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

npm install

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

npm_install.PNG

3. 开启服务

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

hexo g
hexo s

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

success_remind.png

然后打开浏览器，在地址栏输入http://localhost:4000/后会出现如下页面：

success_web.png

这就是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文件夹：

theme.PNG

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

theme_yilia.PNG

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

all_config.PNG

打开_config.yml文件后，翻到最底下，找到如下图所示位置：

theme_config.PNG

修改theme: landscape为yilia，注意theme和yilia之间要有空格，否则无效的。
其中 repo 的值是我们在最开始GitHub中创建的仓库的SSH。打开仓库，在右上角找到clone or download,先点击Use SSH切换到SSH下：

github_change_ssh.PNG

然后再点击右边的剪贴本将内容复制下来，粘贴到上面的repo：后就可以了。

github_ssh.PNG

1.2 发布

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

npm install hexo-deployer-git --save

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

hexo g
hexo d

或一步到位：

hexo g -d

如果你是第一次Git可能会出现一个这个问题：

problem.PNG

这是因为你的SSH key没有配置好或是根本没有SSH key的原因，可以看看这篇文章来解决这个问题。不要慌，小事情🤭

完成之后你的个人博客就竣工了😋，博客地址可以在Github中查看，点击仓库上方的Setting按钮，进入后往下翻翻就可以看到这个界面：

github_pages.PNG

其中的https://kylechandev.github.io/就是你的个人博客地址啦！😁

四、发布文章

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

1.1 创建

如图所示操作：

caozuo.jpg

在打开的git命令行中使用以下命令进行创建：

hexo new [layout] <title>

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

ex.PNG

参数说明：

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

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

hexo publish [layout] <title>

1.2 写作

打开文件夹 source -> _posts，可以看到你刚刚创建的那个Test.md文件，打开他，你会看到：

re.PNG

这就是你要书写文章的地方了，语法为Markdown语法，有关于Markdown语法，不会的请自行百度。
这里我对上面三个参数做一下说明，其中title和date顾名思义，文章标题和日期，而tag对应的就是文章的标签，他需要注意一点，在需要标识多个标签时，使用如下语法：

tags: [tag1, tag2, tag3]

1.3 发布文章

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

五、Yilia配置

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

1. 个人信息
打开根目录下的_config.yml文件（注意是根目录下的，而不是yilia下的）：找到以下内容：

confi_local.PNG

title：表示网站title，就是你博客网站首页在浏览器tab里显示的内容
subtitle：对应你个人信息的描述
author：表示你的名字
效果如下（头像稍后解释）：

confi_web.PNG

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 最终到服务器上的文件

2019/3/25添加

感谢这篇文章

12. 字数统计和阅读时长

Hexo已集成此功能，首先输入以下命令集成：

npm i --save hexo-wordcount

然后在yelee/layout/_partial/post/word.ejs下创建word.ejs文件：

<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
        |  
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

最后在themes/yelee/layout/_partial/article.ejs中找到如下位置并添加内容：

<header class="article-header">
        <%- partial('post/title', {class_name: 'article-title'}) %>
        <% if (!post.noDate){ %>
        <%- partial('post/date', {class_name: 'archive-article-date', date_format: null}) %>
        
        # 从这里开始添加以下内容
        <% if(theme.word_count && !post.no_word_count){%>
          <%- partial('post/word') %>
          <% } %>
        # 到这里结束
          
        <% } %>
      </header>

在根目录下的 -config.yml文件内通过word_count: true来控制，true打开字数统计，false关闭字数统计。

13. PDF 预览

首先安装：

$ npm install --save hexo-pdf

使用：
1.链接使用：
{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
2.本地使用：
{% pdf ./bash_freshman.pdf %}

14. 添加萌物

首先还是安装，执行以下命令：

npm install --save hexo-helper-live2d

然后在根目录下的 _config.yml中添加

live2d:
  enable: true   # 开启
  scriptFrom: local # 默认
  model:
    use: live2d-widget-model-wanko   # 对应人物模型包名
  display:
    position: left     # 处于屏幕左下方
    width: 60         # 大小
    height: 120
  mobile:
    show: true

其中model.use就是要使用的任务模型了，更多模型可以到这里看看。将上面wanko换成对应的名字即可。
官网

可以看看效果：

live2d.PNG

15. 网站运行时间添加

在 themes\yilia\layout\_partial下找到footer.ejs文件，然后像我这样添加：

<footer id="footer">
  <div class="outer">
    <div id="footer-info">
        <div class="footer-left">
            &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
        </div>
      <div class="footer-middle">
      <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("03/22/2019 20:32:21");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已稳定运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>
      </div>
    </div>
  </div>
</footer>

15. 相册
...

16. 视频
直接在 .md 文件中添加：

hexo添加视频.PNG

六、总结

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

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

史上最全搭建免费个人博客网站教程(使用Github)，从搭建到主

一、前言

二、开始搭建

1. 创建Github 域名和空间

1.1 创建Github账号

1.2 创建Github仓库

2. 安装必要软件

2.1 安装Node.js

2.2 安装Git

2.3 安装并配置Hexo

3. 开启服务

三、博客网站配置

1. 安装主题

1.1 安装 Yilia 主题

1.2 发布

四、发布文章

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

1.1 创建

1.2 写作

1.3 发布文章

五、Yilia配置

2019/3/25添加

六、总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

linux&github

新知识

Git

巨人的工具

工具，技巧等

虫虫

故事

程序员技术栈