码迷,mamicode.com
首页 > 其他好文 > 详细

3min快速使用Hexo+GitHub搭建免费博客

时间:2018-06-11 11:00:58      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:site   申请   readme.md   err   html   src   cname   资源   uil   

技术分享图片

准备工作

至于为什么使用Hexo,而不使用Jekyll,网上已经做了一些比较,这里就不在赘述。

由于是免费博客,本篇文章暂不涉及域名申请。

在开始之前,已有的资源包括:

  1. 申请GitHub账户
  2. 安装Node.js
  3. 安装Git

环境检测

输入以下命令有返回版本号,说明Node.js环境配置正确:

1 node -v
2 npm -v

安装Hexo

首先在D盘符下建立hexo文件夹,配置完成后博客资源存放路径:

D:\hexo\blog

依次输入以下命令:

1 cd D:/hexo
2 npm install hexo-cli -g
3 hexo init blog
4 cd blog
5 npm install
6 hexo g #或者hexo generate 
7 hexo s #或者hexo server,可以在http://localhost:4000查看

常见命令:

1 $ hexo new "postName"      #新建文章
2 $ hexo new page "pageName" #新建页面
3 $ hexo generate            #生成静态页面至当前目录下的public目录
4 $ hexo server              #启动本地web服务,用于博客的预览,开启预览访问端口(默认端口4000,ctrl + c关闭server)
5 $ hexo deploy              #部署博客到GitHub
6 $ hexo help                #查看帮助
7 $ hexo version             #查看Hexo的版本

缩写:

1 $ hexo n == hexo new
2 $ hexo g == hexo generate
3 $ hexo s == hexo server
4 $ hexo d == hexo deploy

组合命令::

1 $ hexo s -g #生成并本地预览
2 $ hexo d -g #生成并上传

打开http://localhost:4000已经可以看到一篇内置的blog。

Hexo主题配置

以主题yilia为例进行说明。

安装主题

1 $ hexo clean
2 $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

这是官方主题,其他主题还有:

1 git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

修改hexo目录下的_config.yml配置文件中的theme属性,将其设置为yilia,然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题,可以先执行hexo clean来清理一下public的内容,然后再来重新生成和发布。

更新主题

1 $ cd themes/yilia
2 $ git pull
3 $ hexo g # 生成
4 $ hexo s # 启动本地web服务器

部署Hexo到Github Pages

首先在Github上创建特别的repository,命名为yourname.github.io,yourname改成你自己取的名字。

部署到github的原理:

  1. 之前步骤中在Github上创建的那个特别的repo,一个最大的特点就是其master中的html静态文件,可以通过链接http://yourname.github.io来直接访问。
  2. hexo -g 会生成一个静态网站(第一次会生成一个public目录),这个静态文件可以直接访问。
  3. 需要将hexo生成的静态网站,提交(git commit)到github上。

使用hexo deploy部署

部署到github,需要在blog根目录下的站点配置文件_config.xml中作如下修改:

1 deploy:
2   type: git
3   repo: git@github.com:yourname/yourname.github.io.git
4   branch: master

就是给hexo d 这个命令做相应的配置,让hexo知道要把blog部署在哪个位置。

最后安装Git部署插件,输入命令:

$ npm install hexo-deployer-git --save

这时,分别输入三条命令:

1 hexo clean 
2 hexo g 
3 hexo d

你会发现你的博客已经上线,可以在网络上被访问了。

发布文章

定位到blog根目录,正式发布上线博客文章,在命令行中输入:

$ hexo n "postName" #新建文章

发现在blog根目录下的source文件夹中的_post文件夹中多了一个postName.md文件,使用Markdown(锤子科技锤子便签教程不错)编辑器打开,就可以开始你的个人博客之旅了。

通过带有预览样式的Markdown编辑器实时预览书写的博文样式,也可以通过命令:

$ hexo s --debug 

在本地浏览器的http://localhost:4000预览博文效果。

默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?答案是在合适的位置加上<!--more-->即可。

写好博文并且样式无误后,通过以下命令:

1 $ hexo g 
2 $ hexo d

生成、部署网页,然后随后可以在浏览器中输入域名浏览。

网站具体配置参看官方文档

保留CNAME、README.md等文件

提交之后网页上一看,发现以前其它代码都没了,此时不要慌,一些非md文件可以放到source文件夹下,这里的所有文件都会原样复制(除了md文件)到public目录。

由于hexo默认会把所有md文件都转换成html,包括README.md,所有需要每次生成之后、上传之前,手动将README.md复制到public目录,并删除README.html。

寻找图床

图床,当博文中有图片时,若是少量图片,可以直接把图片存放在source文件夹中,但这显然不合理的,因为图片会占据大量的存储的空间,加载的时候相对缓慢 ,这时考虑把博文里的图片上传到某一网站,然后获得外部链接,使用Markdown语法,![图片信息](外部链接) 完成图片的插入,这种网站就被成为图床。常见的简易的图床网站有:贴图库图片,国内算比较好的图床有两个:新浪微博和 七牛云

 

参考:

[1] https://zhuanlan.zhihu.com/p/26625249

[2] https://div.io/topic/1691

[3] https://github.com/limedroid/HexoLearning

[4] http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa

 

3min快速使用Hexo+GitHub搭建免费博客

标签:site   申请   readme.md   err   html   src   cname   资源   uil   

原文地址:https://www.cnblogs.com/longlively/p/9165245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!