Hexo +Github搭建博客教程

253 阅读4分钟

新建一个git 仓库

首先在 GitHub 上新建一个空仓库, 名称就是「你的用户名.github.io」,(注意!!!仓库的名字的正确格式是github用户名.github.io,之前没仔细看,随便起了个,果断报错。)

此时,你可以得到这个仓库的以git@github.com开头的仓库地址,记住这个仓库地址,后面要用到。

什么是Hexo?

hexo 是一个快速,简洁且高效的博客框架。也就是说,利用hexo你可以迅速的搭建出一个属于自己的漂亮博客。

安装Hexo

下面来说以下具体安装步骤:

  • 安装前提
    • Node.js
    • Git

首先你需要确保自己的系统已经安装了 node 和 git , git官方下载node官方下载。 如果你的电脑已经安装了上述必备程序,那么接下来就可以开始安装Hexo了。

npm instal -g hexo-cli

安装完毕之后,执行以下命令,hexo 就会在指定的文件夹中新建所需要的文件,如下命令执行之后则会新建了一个myBlog文件,且hexo会在myBlog中新增所需要的文件

hexo init myBlog
cd myBlog
init i 

此时,你会发现自己的电脑中会出现一个myBlog文件夹,里面包括很多文件:

_config.yml:

这个文件里面是网站的配置信息,你可以在里面设置各种参数来改编网站的配置。如:

title: 网站标题

subtitle: 网站副标题

description: 网站描述

author: 你的名字

url: 网址

theme:网站主题

......

package.json

这个文件包含了应用程序的信息

scaffolds

模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。 Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes

主题文件夹。Hexo 会根据主题来生成静态页面。

新建第一篇博客文章

  • 输入命令:hexo new 开博大吉,此时你会看到一个md文件路径:

    INFO Created: ~/Documents/myBog/source/_posts/开博大吉.md

    打开这个md 文件并编辑它,编辑完成之后保存。

  • 打开文件 _config.yml并编辑:

      将title改成你想要的网站名字,
    
      author改成你的大名,
    
      最后一行的type 改成 type:git,
    
      并在type的下面一行增加:repo: 文章第一步所生成的仓库地址 
    
  • 安装git部署插件 npm install hexo-deployer-git --save

  • 部署网站 hexo deploy

  • 预览博客:

    进入「你的用户名.github.io」对应的 repo,打开 GitHub Pages 功能,如果已经打开了,就直接点击预览链接,此时你就可以看到自己的博客了!完美!

给博客换一个主题

可能你不喜欢当前这个主题,没关系,换!

  • hexo主题集合
  • 在上面的主题中随便挑一个主题,并进入它的github主页,如 NexT,然后复制它的 SSH 地址或 HTTPS 地址:https://github.com/iissnan/hexo-theme-next.git
  • cd themes
  • git clone https://github.com/iissnan/hexo-theme-next.git
  • cd ..
  • 将 _config.yml 的第 75 行改为 theme: hexo-theme-next,保存
  • hexo generate
  • hexo deploy
  • 再等待一分钟,刷新博客就可以看到新的主题了!完美!

上传源代码到Github

注意:因为「你的用户名.github.io」上保存的只是你的博客,并没有保存「生成博客的程序代码」,你需要再创建一个名为 blog-generator 的空仓库,用来保存 myBlog 里面的「生成博客的程序代码」。

在github上新建一个 blog-generator 的空仓库,并按照它的提示命令进行即可。

这样的话,你的博客代码就保存在了「你的用户名.github.io」,而生成博客的代码则保存在了 blog-generator中,这样数据就不会丢失了。

至此,一个基于hexo+github的博客就搭建完成了,你可以尽情地折腾它,这样可以学到更多哦!