首先什么是Hexo?Hexo就是一个用Nodejs写的一个框架,这个框架是专门用来搭建博客的。注意是专门用来搭建“博客”的,而不是专门用来搭建“网站”的,博客不就是网站吗?是的,但是说博客是网站的一个重要的分支,Hexo是专门用来搭建博客的,就能暗示出,它有便捷的方式来进行文章的编辑和发布的功能。
Hexo可以把一个博客从无到有的建立起来,也能在本地编辑之后,能更简便的发布到网上,而不用像想象中的修改Web的Dom树。
其实搭建一个网站是大体上要分两步的。第一步,域名部分,首先要去买个域名,我的是在阿里云上买的,买了域名,就需要DNS解析,域名是干什么的,是为了让人更好记住的,域名是服务器ip的名字。有域名就需要有服务器,这里的服务器可以指定到github统一的服务器上,当然我们也可以自己买一个服务器,来进行更复杂的网页交互。
Hexo上搭建的是一个静态博客,更多的是为展示用的。同时Hexo支持MarkDown语法,和多种主题。夫复何求?
搭建Hexo框架
- 有node环境
node -v
- 下载Hexo(Mac电脑)
sudo npm install hexo-cli -g
- 创建本地文件
hexo init manuones.github.io
cd limedroid.github.io
npm install
- 生成静态页面
hexo clean
hexo generate //generate可以用g做简写
- 启动服务,本机作为服务器
hexo server //server可以用s做简写
启动成功,就可以去localhost:4000查看了。
部署到GitHub上
按说这时候本地其实已经是一个简单的博客了,可以先尝试着把它部署上去,初学者容易犯的错误就是把整个本地的代码都直接git push到GitHub上,不能这样。
首先在GitHub上建一个repository,这个repository的名字必须是
<GitHub账号名>.github.io
我们部署到GitHub上,并不是用的git命令,而是用的Hexo中的deploy部署命令。需要在配置文件中去配置一下,打开本地文件根目录的_config.yml文件。拉到最后,会看到这里,然后根据你的项目,更换一下repo。
配置好了以后保存,用
hexo d /d为deploy的缩写
这个命令就可以部署到GitHub上的相应的项目中去了,但这时候如果去访问我们的页面,发现还是404报错,找不到页面。这时我们回到GitHub上的项目的根目录,添加一个CNAME文件,注意的是,这个文件不是txt格式,不要加格式,然后在这个文件中,写入你的域名,然后保存,这时再去访问你的域名,就有部署上去的博客了。
新建文章
网站上有内容了,基本上就已经有了很大的成就感了,也放心了很多,接下来就是如何丰富这个网站了。我们搭建的是博客,当然要写文章了,接下来就是用Hexo写文章,并部署到线上。
- 新建文章名为“测试”的文章。
hexo new 测试
在这个目录source/_posts
,就会看到刚刚新建的文章,测试.md
。md是markdown的格式。
- 写文章
打开md文件
vim 测试.md
打开后,如图
title自然是文章题目,data是文章的写作日期,这个可以更改,tags是标签,这个标签可以用于文章的归类。
tags:
- 测试
- 计算机
注意“-”之后要空一格。
标签怎么用?如图
点击标签后
第五行隔开,第六行就是正文了,就可以用MarkDown语法写文章了。写完后,保存。在本地查看效果
hexo clean
hexo g
hexo s
本地没问题就可以部署上去了。
hexo d
选择主题
Hexo提供很多博客网站的主题,可以到这个网站去查看。比如说我的网站的主题点进去后是这个Daily主题,其中就有教你使用的方法,比如到项目的根目录去进行,一定要在项目的根目录。
git clone https://github.com/GallenHu/hexo-theme-Daily.git themes/Daily
npm install --save hexo-renderer-sass
这时查看themes/
目录下就多了个Daily主题。
然后在项目的根目录的_config.yml
中theme更改为Daily。
同时在themes/Daily
中也有一个_config.yml
文件,这个文件是用来负责这个主题中的一些配置的。
其他功能与扩展。
为博客增加其他功能,比如说增加评论功能啊,增加页面访问统计啊,添加百度站内搜索,添加404公益页面等等,这个功能的添加并不是很难,可以参考手把手教你使用Hexo + Github Pages搭建个人独立博客
而我常用的就是,在首页增加预览图,只需要增添两行就可以了
photos:
- http://i.imgur.com/0dZAI8y.jpg
参考文章:
最好入门:Hexo 博客搭建指南
手把手教你使用Hexo + Github Pages搭建个人独立博客
搭建Hexo博客中碰到的坑
网友评论