史上最全搭建免费个人博客网站教程(使用Github),从搭建到主题安装到发布第一篇文章到主题配置一站式讲解

一、前言

日常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. 添加版权信息
效果如下:

copyright.PNG

点击查看教程

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写出第一篇博客

推荐阅读更多精彩内容