总算下定决心要把博客搭建起来了,之前一直因为想找工作的原因,没有整。现在清闲下来了,再加上最近心态放松了,不太想学习了,所以想着找点东西玩儿。
个人博客的搭建是Hexo与Github配合进行搭建。通过Hexo你可以轻松地通过Markdown编写文章,除了支持Markdown本身的语法之外,还可以通过Hexo提供的标签插件来快速插入特定形式的内容。本文主要分为三个部分,一个是博客搭建准备工作,二是博客界面的修改和装饰,三是使用hexo写博客。
[TOC]
博客搭建准备工作
相关技术平台介绍:
- 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配置信息:
1 | git config --global user.name "你的GitHub用户名" |
生成ssh密钥文件
1 | 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 git@github.com
设置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
名字类型的仓库(这里需要$ \color{red}{注意username是你github的用户名,必须一致}$),仓库建立好之后,需要在仓库的Setting
中找到$\textcolor{red}{}$ $ \color{red}{Github Page中的Source,将其修改为master branch}$ 。这些解决方案主要来自于hexo搭建Github博客上传后,网页显示404问题解决方案
部署本地文件到github
远程仓库和本地仓库都创建好了,然后就是建立将本地代码提交远程仓库的路径,用于连接本地仓库和远程仓库。需要的操作是:打开之前建立好的hexo文件夹,然后在里面找到_config.yml
文件,现在只需要更改文件最下面的三行代码。在最下面更改原先的代码为:
1 | deploy: |
需要$ \color{red}{注意}$的是:
- 每一个
:
之后必须要有空格- 注意第二个username之后的后缀
- branch之后跟的master的原因是之前咱们更改了Github Page的Source来源
配置好之后执行:
1 | $ hexo generate (或者输入 hexo g) |
至此,博客搭建算是完成了,而且已经发布到github上了,别人也可以访问到了,在浏览器上访问http:\\username.github.io
就可以看到自己的博客。
建议:
在每次部署github之后,可能要过一会才能显示最新的页面,也就是说输入完
hexo deploty
之后,建议一开始调试页面的时候在本地服务器上操作,可以节省时间每次在部署之前最好先clean一下
1
2
3
4 > $ hexo clean
> $ hexo generate
> $ hexo deploy
>
博客界面的修改和装饰
在网上有许多很好看的Hexo主题,大家可以到这个知乎问题里面自行挑选。Hexo的主题都是放在github上的。Hexo的主题安装也非常简单,只要将主题文件拷贝到站点目录的themes
目录下,然后修改配置文件就行了。
下载主题
在git终端窗口下,定位到Hexo站点目录下(也就是你之前建立的个人博客文件夹下),这里比如下载Next主题
1 | $ cd your-hexo-site |
如果你对Git不太熟悉,可以在线阅读《Pro Git》进行学习。
启用主题
下载完毕之后,打开==站点配置文件== (_config.yml
),找到theme
字段,并将其值改为next
(或者是你下载下来的主题的文件夹名字)
然后验证主题更换之前,需要使用hexo clean
清除hexo的缓存。
主题设定
主题设定,在许多主题的手册上都有教程,大家可以看Next的这个教程更改自己需要的效果,包括设置Scheme,语言,菜单,侧栏,头像,昵称,站点描述以及集成常用的第三方服务。
使用hexo写博客
新建文档以及编辑
在个人博客的文件夹里面打开Git 终端窗口,执行下面的命令
$ hexo new myfirstblog
执行了上述命令在./hexo/source/_posts
路径下新建一个 myfirstblog.md
的文件。打开这个文件,你会看到
1 |
|
这些直接生成的内容,是用来设置Markdown文档在被解析为静态网页文件时的相关配置,其中tags
下面可以添加相关的文章标签。比如我给这篇文章贴上==技术== 的标签
1 |
|
除了tags
这个参数可以设置,我们还可以对文章进行==分类==。使用categories
给文章分类(相当于给文章新建一个文件夹进行分类设置),这个和tags
不一样。
生成文件的时候需要按照下面的命令将markdown文档生成相应的静态文件。
1 | $ hexo clean |
遇到的坑
标签,分类,主页这些,在主题配置文件中需要按照这样的格式来写(==不过准确来说,应该按照你当时所在版本的格式要求来写==),开始我看的网上的写法都是这样写的
tags: /tags
没有后面的那个斜线,然而!!!,那就是错的,必须要加斜线。我后来总结了,应该是版本变动的原因,所以==按照下载到的版本来写。==1
2
3
4
5
6
7
8menu:
home: /
categories:
about:
archives:
tags: