美文网首页
用Hexo在github搭建个人博客

用Hexo在github搭建个人博客

作者: c4a1d989518e | 来源:发表于2017-05-30 22:48 被阅读69次

首先什么是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博客中碰到的坑

相关文章

网友评论

      本文标题:用Hexo在github搭建个人博客

      本文链接:https://www.haomeiwen.com/subject/rhqlfxtx.html