GitHubPages+Hexo+nexT快速搭建个人博客

发表于 | 分类于 | 阅读次数

​ 很早之前就想搭个自己的个人独立博客了,但是比较懒,自己又不擅长做前端页面，觉得做出来的页面太丑,所以一直拖着。之前的想法一直是自己开发,前端后端代码全包了。后来无意之间发现现在网上有很多种给非开发人员用的搭建博客的工具，如wordpress和hexo等。然后昨天心血来潮在网上找了几篇教程开始尝试搭建自己个人博客。废话不多说,直接开搞。

技术介绍

​ 下面为搭建博客要用到的技术做简单的介绍,需要详细了解的请百度谷歌。

  • github pages

    ​ 众所周知，github是世界上最大的代码托管平台(不知道的请百度- -,然后注册一个github账号)。github pages是github的一个服务。其实通俗点讲就是一个静态站点部署服务。你可以创建一个特殊的仓库,然后这个仓库就是你站点资源的存放位置。之后你访问特定的url就可以访问你的那些静态资源。

  • hexo

    ​ hexo是一个用于快速搭建博客系统的工具。hexo支持用markdown语法编写你的博客。它基于nodeJs。(所以使用的时候需要安装nodeJs)

  • nexT

    ​ nexT是目前下载量最大的一个hexo主题。它提供了丰富的文档和第三方服务帮我们搭建更强大的博客。

创建 gitHub pages页面

​ 请确保你已经有gitHub账号了。没有请去注册一个。

​ 英文好的请直接看https://pages.github.com 官方文档。毕竟我这里的教程可能会过期,但是官方文档用于不会。

中文版教程开始:

​ 1. 创建一个仓库(repository)。仓库名字必须为 yourname.github.io。这里的yourname必须是你的github账号名。比如我的gitHub账号名是kongtrio,那么我创建的仓库就是 kongtrio.github.io。

​ 2. 记住这个仓库的git地址 https://github.com/kongtrio/kongtrio.github.io.git 。后面要用到

安装hexo

  1. 如果你的电脑没有装nodeJs,请去nodeJs官网下载安装包安装nodeJs。https://nodejs.org/en/download/.有的话请看步骤二。

  2. 安装完nodeJs你可以直接看hexo官方文档,跳过我下面的那些步骤。还是那句话，学习一个技术直接看官方文档就对了。

  3. 打开dos命令(如果你是mac用户或者linux用户,请打开shell)。输入命令 npm install -g hexo-cli安装hexo包。

  4. 安装完后,随便找个地方,建立一个站点。 下面是相关命令

    1
    2
    3
    hexo init <folder>   #建立一个站点
    cd <folder>       #进入该目录
    npm install       #初始化该站点

  5. 站点生成后,就可以开始写文章了。dos界面下,进入所在站点目录，输入hexo new [layout] <title>命令。hexo会自动帮你生成一个 <title>.md 的文件。然后你就可以在这个文件上编写你的博客内容了。

  6. 写完博客后,我们先试着在本地部署一下服务。还是在dos命令下，进入站点目录。一次输入:

    1
    2
    3
    hexo clean   # 清除缓存,之后会经常用到
    hexo g     # 生成站点静态文件
    hexo s     # 部署服务

    执行完hexo s后终端会提示部署成功。然后我们在浏览器输入 http://localhost:4000。就可以访问我们的博客网站啦。

  7. 上面的步骤仅仅是在本地部署起了服务而已。想要让其他人访问到你的博客系统，还需要将站点资源发布到gitHub上面才行。首先，先按照一个npm包。打开dos命令,输入npm install hexo-deployer-git --save安装git工具。打开站点目录下面的配置文件_config.yml(用任意编辑器),配置deploy参数。一开始配置文件是这样的:

    1
    2
    deploy:
      type:

    我们把它改成我们的git仓库地址。

    1
    2
    3
    4
    5
    deploy:
      type:git
      repo: https://github.com/kongtrio/kongtrio.github.io.git
      branch: master
      message: [message]

  8. 配置完后,在dos命令行输入。

    1
    2
    3
    hexo clean
    hexo g
    hexo d    # 部署到远程仓库

    执行hexo d的时候。会让你输入gitHub的用户密码,照常输入进去就好了。命令全部执行完后。我们就可以访问我们的博客网站了。https://kongtrio.github.io (请将kongtrio改成你的username)

使用nexT主题

​ 博客是搭建好了, 但是我们发现hexo的默认主题风格比较丑。好在hexo的主题是可定制的。所以我们可以更换别人已经做好的主题。nexT就是其中一个比较强大的主题。下面简单的教大家怎么切换到这个主题。

  1. 先去nexT的github页面下载nexT项目。https://github.com/iissnan/hexo-theme-next。然后放到站点目录下面的一个themes文件夹中。解压。
  2. 解压后会得到一个hexo-theme-next-master文件夹。重命名成next。
  3. 修改站点配置文件_config.yml里面的theme参数,修改值为next。
  4. 重新清除缓存,生成新的资源文件，然后部署,主题就切换成next了。

nexT还提供了很多强大的功能,如搜索,评论,文章阅读数统计,百度站长统计等等。可以自行去阅读nexT的文档照着做。都非常方便简单。