[Hexo]Hexo+github搭建静态博客

本文涉及的产品
.cn 域名,1个 12个月
简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SunnyYoona/article/details/51457626 1.简介Hexo 是一个快速、简洁且高效的博客框架。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SunnyYoona/article/details/51457626
1.简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章(经常玩CSDN上的人都知道),在几秒内,即可利用靓丽的主题生成静态网页。通过Hexo我们可以快速创建自己的博客,仅需要几条命令就可以完成。发布时,Hexo可以部署在自己的Node服务器上面,也可以部署github上面。对于个人用户来说,部署在github上好处颇多,不仅可以省去服务器的成本,还可以减少各种系统运维的麻烦事(系统管理、备份、网络)。所以,在这里我是基于github搭建的个人博客站点。

2. 环境配置

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

  • Node.js

  • Git

2.1 Git

Git安装参考博文:http://blog.csdn.net/sunnyyoona/article/details/51453880

2.2 Node.js

安装 Node.js 的最佳方式是使用 nvm。

 
 
  1. wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后,重启终端并执行下列命令即可安装 Node.js。

 
 
  1. nvm install 4
2.3 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

一般情况下我们机器上没有安装npm,首先要安装npm:

 
 
  1. sudo apt-get install npm

下面使用npm安装Hexo:

在使用npm安装hexo时,我们有可能会遇到上面的问题,我们运行下面的命令,才能安装成功:

再重新安装hexo:

3. 建站
3.1 目录和文件

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

 
 
  1. hexo init <folder>
  2. cd <folder>
  3. npm install


新建完成后,指定文件夹的目录如下:

scaffolds 脚手架,也就是一个工具模板

scripts 写文件的js,扩展hexo的功能

source 存放博客正文内容

source/_posts 文件箱

themes 存放皮肤的目录  themes/landscape 默认的皮肤

_config.yml 全局的配置文件

db.json 静态常量


备注:

(1)我们每次用到的就是_posts目录里的文件,而_config.yml文件和themes目录是第一次配置好就行了。

(2)_posts目录:Hexo是一个静态博客框架,因此没有数据库。文章内容都是以文本文件方式进行存储的,直接存储在_posts的目录。Hexo天生集成了markdown,我们可以直接使用markdown语法格式写博客,例如:hello-world.md。新增加一篇文章,就在_posts目录,新建一个xxx.md的文件。


3.2 全局配置

_config.yml配置信息:(网站的配置信息,可以在此配置大部分的参数)

  • 站点信息: 定义标题,作者,语言

  • URL: URL访问路径

  • 文件目录: 正文的存储目录

  • 写博客配置:文章标题,文章类型,外部链接等

  • 目录和标签:默认分类,分类图,标签图

  • 归档设置:归档的类型

  • 服务器设置:IP,访问端口,日志输出

  • 时间和日期格式: 时间显示格式,日期显示格式

  • 分页设置:每页显示数量

  • 评论:外挂的Disqus评论系统

  • 插件和皮肤:换皮肤,安装插件

  • Markdown语言:markdown的标准

  • CSS的stylus格式:是否允许压缩

  • 部署配置:github发布项目地址


 
 
  1. # Hexo Configuration
  2. ## Docs: https://hexo.io/docs/configuration.html
  3. ## Source: https://github.com/hexojs/hexo/
  4. # 站点信息
  5. title: Yoona
  6. subtitle:
  7. description: Stay Hungry Stay Foolish
  8. author: sjf0115
  9. language:
  10. timezone:
  11. # URL
  12. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  13. url: http://sjf0115.club/
  14. root: /
  15. permalink: :year/:month/:day/:title/
  16. permalink_defaults:
  17. # Directory 文件目录
  18. source_dir: source
  19. public_dir: public
  20. tag_dir: tags
  21. archive_dir: archives
  22. category_dir: categories
  23. code_dir: downloads/code
  24. i18n_dir: :lang
  25. skip_render:
  26. # Writing 写博客配置
  27. new_post_name: :title.md # File name of new posts
  28. default_layout: post
  29. titlecase: false # Transform title into titlecase
  30. external_link: true # Open external links in new tab
  31. filename_case: 0
  32. render_drafts: false
  33. post_asset_folder: false
  34. relative_link: false
  35. future: true
  36. highlight:
  37.  enable: true
  38.  line_number: true
  39.  auto_detect: false
  40.  tab_replace:
  41. # Category & Tag  目录和标签
  42. default_category: uncategorized
  43. category_map:
  44. tag_map:
  45. # Date / Time format 时间和日期格式
  46. ## Hexo uses Moment.js to parse and display date
  47. ## You can customize the date format as defined in
  48. ## http://momentjs.com/docs/#/displaying/format/
  49. date_format: YYYY-MM-DD
  50. time_format: HH:mm:ss
  51. # Pagination 分页设置
  52. ## Set per_page to 0 to disable pagination
  53.   per_page: 10
  54.   pagination_dir: page
  55. # Extensions 插件与皮肤
  56. ## Plugins: https://hexo.io/plugins/
  57. ## Themes: https://hexo.io/themes/   theme: landscape
  58. # Deployment 部署配置
  59. ## Docs: https://hexo.io/docs/deployment.html
  60. deploy:
  61.  type: git
  62.  repo: git@github.com:sjf0115/hexo-blog.git


3.3 创建新文章

接下来,我们开始新博客了,创建第一博客文章。Hexo建议通过命令行操作,当然你也可以直接在_posts目录下创建文件。

下面我们创建一篇名为hexo的文章:

在_post目录下,就会生成文件:”hexo.md“

然后,我们编辑文件:”hexo.md”,以markdown语法写文章,然后保存。

 
 
  1. ---
  2. title: hexo
  3. date: 2016-05-17 17:39:17
  4. updated: 2016-05-17 17:54:04
  5. tags:
  6. - hexo
  7. categories: diary
  8. ---
  9. this is a hero test
  10. welcome to **yoona** world!!
  11. ```{bash}
  12. xiaosi@Qunar:~/blog$ hexo new hexo
  13. Native thread-sleep not available.
  14. This will result in much slower performance, but it will still work.
  15. You should re-install spawn-sync or upgrade to the lastest version of node if possible.
  16. Check /usr/local/lib/node_modules/hexo-cli/node_modules/hexo-util/node_modules/
  17. cross-spawn/node_modules/spawn-sync/error.log for more details
  18. INFO  Created: ~/blog/source/_posts/hexo.md
  19. ```
  20. [Yoona博客](http://blog.csdn.net/sunnyyoona)
  21. 2016.05.17

在命令行,启动服务器:

通过浏览器打开, http://localhost:4000/ ,就出现了我们新写的文章。

4. 发布项目到github
4.1 静态化处理

写完文章之后,可以发布到github上面。hexo是一个静态博客框架。静态博客,是只包含html, javascript, css文件的网站,没有动态的脚本。虽然我们是用Node进行的开发,但博客的发布后就与Node无关了。在发布之前,我们要通过一条命令,把所有的文章都做静态化处理,就是生成对应的html, javascript, css,使得所有的文章都是由静态文件组成的。

在本地目录下,会生成一个public的目录,里面包括了所有静态化的文件。

4.2 发布到github

接下来,我们把这个博客发布到github。

在github中创建一个项目hexo-blog,项目地址:https://github.com/sjf0115/hexo-blog

编辑全局配置文件:_config.yml,找到deploy的部分,设置github的项目地址。

 
 
  1. # Deployment
  2. ## Docs: https://hexo.io/docs/deployment.html
  3. deploy:
  4.  type: git
  5.  repo: git@github.com:sjf0115/hexo-blog.git

然后,通过命令进行部署:


出现上述问题,可以使用配置ssh秘钥解决。

如果出现deployer找不到git: ERROR Deployer not found: git错误,使用下面方式解决:

再来一次hexo deploy:

到目前为止这个静态的web网站就被部署到了github,检查一下分支是gh-pages。gh-pages是github为了web项目特别设置的分支。

然后,点击”Settings”,找到GitHub Pages,提示“Your site is published at http://sjf0115.github.io/hexo-blog”。


打开网页,就是我们刚刚发布站点:

可以看到网页样式出现问题,不用担心,我们设置域名之后就OK了。

4.3 设置域名

在dnspod控制台,设置主机记录@,类型A,到IP 23.235.37.133(github地址)。

对域名判断是否生效,对域名执行ping:



在github项目中,新建一个文件CNAME,文件中写出你要绑定的域名sjf0115.club。通过浏览器,访问http://sjf0115.club,就打开了我们建好的博客站点。


目录
相关文章
|
12天前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
5月前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
11月前
|
缓存 JavaScript 网络安全
基于Hexo的主题Fluid搭建Github博客
基于Hexo的主题Fluid搭建Github博客
155 1
|
5月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
166 0
|
数据采集 JavaScript 搜索推荐
hexo搭建github.io博客
hexo搭建github.io博客
168 0
|
数据采集 JavaScript 程序员
用 GitHub + Hexo 建立你的第一个博客
其中,第一种最简单,也最受限,说不定还会被删帖删号。第二种稍复杂,另外需要自己找部署的服务器,但可定制化较高,是很多程序员的选择。最后一种,是在重复造轮子,不过从另一个方面来看,倒是锻炼编程能力的好方式。
|
5月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
110 0
|
JavaScript 网络安全 开发工具
Github+Hexo搭建个人网站详细教程
随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿,是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。
|
JavaScript
Hexo+GitHub搭建个人博客
Hexo+GitHub搭建个人博客
82 0
Hexo+GitHub搭建个人博客
|
缓存 JavaScript 网络安全
使用Hexo在Github上搭建个人博客
使用Hexo在Github上搭建个人博客
111 0