你难道不想搭建自己的个人博客吗?

这是之前自己搭建个人博客的过程,基于GitHubPages+Hexo搭建,分享给大家。有什么问题可以直接留言。

1、安装node.js

node.js:

2、安装Git

Git:

3、安装Hexo

在文件夹中建立名为hexo的文件夹,右键打开GitBush,使用npm安装Hexo。

npminstall-ghexo-cli

初始化blog,Hexo自动在blog文件夹下创建网站所需文件。

hexoinitblog

进入blog文件夹,安装依赖包。

cdblognpminstall

生成静态页面

hexog#或hexogenerate

启动本地web服务

hexos#或hexoserver

此时在浏览器地址栏中键入:4000/,可以看到内置的页面。

4、GitHubPages设置

註册GitHub及其使用可以参考从0开始学习GITHUB系列汇总

在GitHub上创建仓库,而且仓库的名字格式为:username.github.io,username与GitHub帐号名对应,每个帐号只能有一个仓库来存放个人主页。可以通过来访问个人主页。

5、部署Hexo到GitHubPages

其实就是将Hexo生成的静态页面提交(gitcommit)到GitHub上。

在Hexo根目录下的配置文件_config.yml中进行修改:

deploy:type:gitrepo:git@github.com:zywudev/zywudev.github.io.gitbranch:master

还得安装一个扩展

npminstallhexo-deployer-git--save

然后在命令行部署

hexod

6、Hexo主题基本配置

选择喜欢的主题。Hexo官网主题。我的博客选用的是NexT主题,官方提供了详细的使用文档。

下载NexT主题

gitclone

启用NexT主题

克隆完成后,打开站点配置文件__config.yml,找到theme栏位,修改为:

theme:next

站点配置文件:博客目录下的__config.yml文件。

主题配置文件:themes/next目录下的__config.yml文件。

启动本地web服务验证

hexos--debug

至此,即完成了基于GitHubPages+Hexo的个人博客框架搭建。

7、博客推广

将个人博客推广到Google搜寻引擎上。

验证网站

推荐文件验证。

下载HTML验证文件,将该文件放到博客source目录下。

hexo编译文件时,会给下载的HTML文件中添加其他的内容,导致验证失败,所以需要在文件开头添加layout:false来取消hexo对其进行的转换。

layout:false---google-site-verification:googleb6fc53a32f5418d9.html

部署到GitHub,输入,能访问即可点击验证按钮进行验证。

站点地图

站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知Google和其他搜寻引擎。Google等搜寻引擎网页抓取工具会读取此文件,以便更加智能地抓取您的网站。

使用hexo-generator-sitemap插件来生成Sitemap,执行

npminstallhexo-generator-sitemap--save

执行

hexog

博客根目录的public下面生成了sitemap.xml。如果没有,在博客目录的_config.yml中添加如下代码重新编译

sitemap:path:sitemap.xml

要将博客目录__config.yml中的url栏位设置为自己的域名

url:

部署到Github,访问。

提交sitemap到Google站长工具,找到添加站点地图按钮,添加sitemap.xml即可,如下图。

8、博客优化

添加about页面

hexonewpage"about"

在\source\about\目录下会生成一个index.md文件,添加个人信息即可。

添加分类、标签页面

hexonewpage"categories"hexonewpage"tags"

博客标题、作者等

打开站点配置文件

title:Wu'sblogsubtitle:description:Oeveryouthful,Oeverweepingauthor:Wulanguage:zh-Hanstimezone:

修改文章内文本连结样式

将文本连结设置为蓝色,修改themes

ext\source\css_common\components\post\post.styl,添加

.post-bodypa{color:#0593d3;border-bottom:none;&:hover{color:#0477ab;text-decoration:underline;}}

修改博客logo

通过网站favicon在线制作网站制作favicon图片。

将图片放在博客source目录下即可。

添加ForkmeonGitHub挂件

在官网选取样式。

拷贝代码,修改href地址为自己的GitHub地址

改为:

修改文件:themes/next/layout/_layout.swig,将代码拷贝至对应位置。

{%include'_scripts/third-party/analytics.swig'%}{%-include'_partials/header.swig'%}