基于Github的个人博客快速搭建教程

总算下定决心要把博客搭建起来了,之前一直因为想找工作的原因,没有整。现在清闲下来了,再加上最近心态放松了,不太想学习了,所以想着找点东西玩儿。

个人博客的搭建是Hexo与Github配合进行搭建。通过Hexo你可以轻松地通过Markdown编写文章,除了支持Markdown本身的语法之外,还可以通过Hexo提供的标签插件来快速插入特定形式的内容。本文主要分为三个部分,一个是博客搭建准备工作,二是博客界面的修改和装饰,三是使用hexo写博客。

博客搭建准备工作

相关技术平台介绍:

  • Hexo是一款基于Node.js的静态博客框架,依赖少、易于安装使用,可以方便的生成静态网页托管在github和heroku上,是搭建博客的首选框架。同时hexo的创建人是台湾人,对中文的支持还是很友好的。
  • git是开源的分布式版本控制系统,用于敏捷高效地处理项目,个人博客搭建好了,就需要使用git同步到github上。然后说一下git和github的区别,git是一款免费开源的分布式版本控制系统,而github是用git做版本控制的代码托管平台。

注意点:在Hexo中有两份主要的配置文件,其名称都是_config.yml。其中,一份在站点根目录下,主要包含Hexo本身的配置;另外一份位于主题(就是你下载的theme主题)目录下,这份配置由主题的作者提供,主要用于配置主题相关的选项,前者称为 $ \color{blue}{站点配置文件},后者称为\color{red}{主题配置文件}$

git下载安装以及绑定github账号

可以参看廖雪峰老师的Git教程,然后从Git官网下载Git 。安装好Git之后需要将github账号与其绑定。在菜单中搜索Git Bash,设置user.name和user.email配置信息:

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三次回车就行,默认不需要设置密码

然后找到生成的.ssh的文件中的id_rsa.pub密钥,将内容全部复制。打开Github_Settings_keys页面,新建new SSH Key。Title是标题,任意填就行,将刚刚复制的id_rsa.pub内容复制进去,最后点击Add SSH Key。在Git Bash中检测Github公钥设置是否成功,输入ssh [email protected]

设置github密钥的原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在github上,私钥放置在自己的电脑上,github要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟github上面的公钥是否是配对,如果配对就说明你是合法用户。

安装Node.js

hexo是基于Node.js,Node.js的下载地址 ,选择合适的下载安装即可。

安装hexo

hexo是个人博客网站的框架,这里需要先新建一个文件夹(文件夹命名最好是英文,不然容易出现不可预知的错误)。hexo框架和以后发布的网页都在这个文件夹中,创建好这个文件夹,然后进入,右键使用Git Bash Here进行hexo的安装。在命令行里面输入下面五条语句

  • npm install -g hexo-cli
  • hexo init
  • nmp install
  • hexo generate
  • hexo server

第一条语句用来安装hexo(安装完之后,打开刚才新建的文件夹),在文件夹中使用Git Bash Here输入第二条命令,用来自动在文件夹中下载搭建网站需要的文件。第三条语句用来安装依赖包,第四条语句用来生成静态文件。第五条语句用来启动本地服务器。

默认情况下,就可以通过访问http://localhost:4000/,可以看到本地建立的博客,但是要建立一个在线博客还需要将github和本地博客进行连接。

创建github repository远程仓库

创建也比较简单,但是这个地方有一个坑需要注意,稍后来讲。建立一个username.github.io名字类型的仓库(这里需要usernamegithub\textcolor{red}{注意username是你github的用户名,必须一致}),仓库建立好之后,需要在仓库的Setting中找到\textcolor{red}{} GithubPageSourcemasterbranch\textcolor{red}{Github Page中的Source,将其修改为master branch} 。这些解决方案主要来自于hexo搭建Github博客上传后,网页显示404问题解决方案

部署本地文件到github

远程仓库和本地仓库都创建好了,然后就是建立将本地代码提交远程仓库的路径,用于连接本地仓库和远程仓库。需要的操作是:打开之前建立好的hexo文件夹,然后在里面找到_config.yml文件,现在只需要更改文件最下面的三行代码。在最下面更改原先的代码为:

deploy:
  type: git
  repository: http://github.com/username/username.github.io.git
  branch: master

需要\textcolor{red}{注意}的是:

  • 每一个: 之后必须要有空格
  • 注意第二个username之后的后缀
  • branch之后跟的master的原因是之前咱们更改了Github Page的Source来源

配置好之后执行:

$ hexo generate (或者输入 hexo g)
$ hexo deploy (或者输入 hexo d)

至此,博客搭建算是完成了,而且已经发布到github上了,别人也可以访问到了,在浏览器上访问http:\\username.github.io就可以看到自己的博客。

建议:

  • 在每次部署github之后,可能要过一会才能显示最新的页面,也就是说输入完hexo deploty 之后,建议一开始调试页面的时候在本地服务器上操作,可以节省时间

  • 每次在部署之前最好先clean一下

    $ hexo clean
    $ hexo generate
    $ hexo deploy
    

博客界面的修改和装饰

在网上有许多很好看的Hexo主题,大家可以到这个知乎问题里面自行挑选。Hexo的主题都是放在github上的。Hexo的主题安装也非常简单,只要将主题文件拷贝到站点目录的themes目录下,然后修改配置文件就行了。

下载主题

在git终端窗口下,定位到Hexo站点目录下(也就是你之前建立的个人博客文件夹下),这里比如下载Next主题

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

如果你对Git不太熟悉,可以在线阅读《Pro Git》进行学习。

启用主题

下载完毕之后,打开站点配置文件 (_config.yml),找到theme字段,并将其值改为next(或者是你下载下来的主题的文件夹名字)

然后验证主题更换之前,需要使用hexo clean清除hexo的缓存。

主题设定

主题设定,在许多主题的手册上都有教程,大家可以看Next的这个教程更改自己需要的效果,包括设置Scheme,语言,菜单,侧栏,头像,暱称,站点描述以及集成常用的第三方服务。

使用hexo写博客

新建文档以及编辑

在个人博客的文件夹里面打开Git 终端窗口,执行下面的命令

$ hexo new myfirstblog

执行了上述命令在./hexo/source/_posts 路径下新建一个 myfirstblog.md的文件。打开这个文件,你会看到

---
title: myfirstblog.md
date: 2018-10-16 18:11:25
tags:
---

这些直接生成的内容,是用来设置Markdown文档在被解析为静态网页文件时的相关配置,其中tags下面可以添加相关的文章标签。比如我给这篇文章贴上技术 的标签

---
title: myfirstblog.md
date: 2018-10-16 18:11:25
tags:
 - 技术
---

除了tags这个参数可以设置,我们还可以对文章进行分类。使用categories 给文章分类(相当于给文章新建一个文件夹进行分类设置),这个和tags不一样。

生成文件的时候需要按照下面的命令将markdown文档生成相应的静态文件。

$ hexo clean
$ hexo generate

遇到的坑

  • 标签,分类,主页这些,在主题配置文件中需要按照这样的格式来写(不过准确来说,应该按照你当时所在版本的格式要求来写),开始我看的网上的写法都是这样写的tags: /tags没有后面的那个斜线,然而!!!,那就是错的,必须要加斜线。我后来总结了,应该是版本变动的原因,所以按照下载到的版本来写。

    menu:
      home: /    
      categories: /categories/ 
      about: /about/    
      archives: /archives/ 
      tags: /tags/ 
      #sitemap: /sitemap.xml
      #commonweal: /404/
    

参考文献:

Next官方使用文档

Hexo+Github Page搭建个人博客

Hexo教程:(三)使用Hexo写博客

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章