为什么搭建Hexo静态博客?
Hexo是一款快速、简洁而且高效的博客框架,使用Markdown(或者其他渲染引擎)解析文章,在几秒内,既可以安装可利用的靓丽的主题生成静态页面
我目前只在window系统下面操作过,Mac和linux没有操作过,不过原理应该是一样的,欢迎大家点评,不过以后要是在liunx或者Mac折腾的话,相信会继续更新哒!!
关于Markdown的使用,请见这篇文章MarkDown学习笔记
那么建立Hexo,你要具备什么知识呢?
知道npm包管理工具的基本使用
了解Git原理以及使用Git
知道Github page是如何实现的
域名分流是如何操作的
其特点有:
- 超快速度:
Node.js所带来的超快生成速度,让上百个页面在几秒内瞬间完成
- 支持Markdown:
Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件
- 一键部署:
只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站
- 丰富的插件:
Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。
我觉得用 大象无形,大道至简
形容最好了!Hexo太容易就运行了呢!
那还等什么,快开始Hexo探索之旅吧!!
勤能补拙是良训,一分耕耘一分才 ——华罗庚
在本地运行Hexo项目
撸码时刻,准备兴奋!! 你的系统必须具备以下环境,否则,会安装失败的哟
- Node.js
- Git
安装Node建议用nvm,nvm是node版本控制工具
NVM安装成功后,执行 nvm install stable 就可以安装node了
1、全局安装hexo
npm install hexo-cli -g
2、hexo命令生成一个博客雏形
hexo init blog
3、进入blog文件夹
cd blog
4、根据package.json安装依赖模块
npm install
5、启动hexo项目
hexo server
你的博客可以运行了吧,啊哈哈,有没有一种超快的赶脚?不过Hexo远不止于此,你离真正使用Hexo搭建一个个性化博客还是很远的呢,待我慢慢道来吧。
如果想要自定义Hexo博客,请看我这篇文章哦 搭建Hexo博客进阶篇
运行成功之后,把目标转向安装的文件夹,文件夹目录如下所示:
.
├── _config.yml //这里是网站的配置信息
├── package.json //HEXO项目依赖
├── scaffolds //模板文件夹
| ├──post.md //文章模板
| ├──draft.md //
| └──page.md
├── source //资源文件夹,
| ├── _drafts
| └── _posts
└── themes // 主题文件夹。Hexo会根据主题来生成静态页面
目录文件解释如下:
目录/文件名 | 子文件名 | 作用 | 备注 |
---|---|---|---|
_config.yml | --- | 这里是网站的配置信息 | ---- |
package.json | --- | HEXO项目依赖 | 应用程序的信息,EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。 |
scaffolds | post,draft,page(.md) | 模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。 | 模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。 |
source | _drafts、_posts | 资源文件夹是存放用户资源的地方 | 除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。 |
themes | 主题配置相关 | 主题 文件夹。Hexo 会根据主题来生成静态页面。 | --- |
Hexo的基本使用
配置
网站基本信息在 _config.yml
中配置 :
网站
Site
title: 网站标题
subtitle: 网站副标题
description: 网站描述
author: 您的名字
language: 网站使用的语言 zh-Hans,
timezone: 网站时区 America/New_York, Japan, 和 UTC
其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者
网站时区,详情请见时区列表
网址
url: http://yoursite.com 网址
root: / 网站根目录
permalink: :year/:month/:day/:title/ 文章的永久链接格式
permalink_defaults: 永久链接中各部分的默认值
如果您的网站存放在子目录中,例如
http://yoursite.com/blog
,则请将您的 url 设为http://yoursite.com/blog
并把 root 设为 /blog/。
目录
Directory
source_dir: source 资源文件夹,这个用来存放内容
public_dir: public 公共文件夹,这个文件夹用于存放生成的站点文件
tag_dir: tags 标签文件夹
archive_dir: archives 归档文件架
category_dir: categories 分类文件夹
code_dir: downloads/code include code文件夹
i18n_dir: :lang 国际化文件夹
skip_render:跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。
public,tags,archives,categories
文件夹在hexo项目中是不可见的,只有执行Hexo generate
命令时,生成public静态文件
的时候才存在
我们可以看一下public文件夹的目录信息
文章
Writing
新文章的文件名称
new_post_name: :title.md //File name of new posts
预设布局
default_layout: post
把标题转换为 title case
titlecase: false Transform title into titlecase
在新标签中打开链接
external_link: true Open external links in new tab
把文件名称转换为 (1) 小写或 (2) 大写
filename_case: 0
显示草稿
render_drafts: false
启动 Asset 文件夹
post_asset_folder: false
把链接改为与根目录的相对位址
relative_link: false
显示未来的文章
future: true
代码块的位置
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
分类标签
Category & Tag
default_category: uncategorized
category_map:
tag_map:
时间/日期格式
Date / Time format
date_format: YYYY-MM-DD
time_format: HH:mm:ss
分页
Pagination
per_page: 10
pagination_dir: page
扩展
Extensions
Plugins: https://hexo.io/plugins/
Themes: https://hexo.io/themes/
theme: yelee
一键部署
Deployment
deploy:
type:
Hexo基本指令
新建文章:
hexo new [layout]
注意:没有设置layout时候,默认使用 _config.yml 中的 default_layout 参数代替,如果标题包含空格,请用引号括起来生成静态文件:
hexo generate
,简写 hexo ghexo g -d
,文件生成后立即部署网站hexo g -w(--watch)
, 文件生成后件监视文件改动发表草稿
hexo publish [layout]
本地启动服务
hexo s
默认4000端口hexo s -p(--port) 8888 -s(--static) -l(--log)
重设端口,启用静态文件,启动日记记录,使用覆盖记录格式部署网站
hexo delpoy
渲染文件
heox render
path设置输出路径[file2] -o path 从其他博客系统迁移内容
hexo migrate
清除缓存(一般主题改变后使用)
hexo clean
tips:清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。列出网站资料
hexo list
显示版本
hexo version
同步部署到Github Pages和Coding Pages
Github Pages原理
完成github部署,首先你得有一个github账号,关于git的使用可以参考廖雪峰的git教程,讲的很详细,算是入门的好教程了,更详细的请参考git官网
在这里我默认大家已经有账号,并且完成了SSH KEY配置,这个SSH KEY的作用在,让你的git识别你的电脑,这样你才可以推送远程。
好了废话不多说,我来讲述Github pages运行原理啦
首先,还是老样子,Github Pages官网,这里可以了解Github pages是什么,我在这里说说我的见解吧
//视频代码
What is Github Pages?
以上视频说了什么是github pages
,其实 github pages
是对一个静态资源的访问,相当于文件服务器,我们用 node
也可以做一个文件服务器,Hexo通过生成静态资源文件目录 public
,把 public
目录下的内容推送到 git
远程的 gh-pages
分支,就完成了 github pages
的操作,之后我们可以通过 https://username.github.io/repos
来访问你的静态资源了,就是这么简单
注意点:要想通过github pages来访问你的资源,有两种做法:
- 新建一个仓库,把本地资源直接推送到远程仓库的
gh-pages
分支,此时你的站点就在https://username.github.io/repos
,repos 子目录了 - 新建一个仓库,仓库名为username.github.io,把本地资源直接推送东master分支,此时你的站点是在
https://username.github.io/
就是根目录了,但是你的资源在repos目录下,所以记得引用本地资源要这么写href='/public/xxx.img'
至于coding page跟github同样是采用git版本控制的,而且coding page操作简单,这里不说了,注意ssh key的配置,否则你是无法推送的
。
购买域名
购买域名,在这里没什么好说的了,只知道腾讯域名的.top 1年只要4元,挺实惠的。
买了域名之后,我们要把 github
和我们的域名绑定在一起,进行双向绑定
- 域名绑定Github
买了域名之后,都会有域名解析服务,我们就把域名解析设置在你的https://username.github.io/repos
网址就可以了,这样,当你访问xxxx.top的时候,就会解析到你的github地址上去。也就是说你买的域名可以用了哈。 -
github pages
绑定你的域名
这个做法,原理很简单,只要在仓库的根目录添加一个文件,文件名为CNAME
,文件内容就写你买的域名,这样就OK了。
但是,注意了,因为你每次写完文章的时候,都要部署,所以建议把
CNAME
文件放在在 HEXO 的source
文件夹内,这样,每次部署的时候,source
根目录的文件就会放在public根目录下了,一样达到了目的
大功告成了吗?哈哈,并没有,我们做到这一步,无论是访问xxx.top
还是访问https://username.github.io/repos
都会跳转到xxx.top,但是注意,服务器在国外 :blush:
我们为什么要同时部署到两个地方呢?
距离阻挡不了相思,还是得有备胎!
部署两个地方,现在是没什么好处了,之前因为 Coding pages
的服务器在国内,那么国内的用户通过域名分流可以访问 Coding pages
,而国外的用户,域名分流,可以访问到 Github pages
,但是现在 Coding pages
的服务器在香港,这样一来,也没什么好处了,还有就是百度爬虫是爬取不到 github page
的资源的,但是可以爬取到 Coding page
的,所以,这样一来,我们的网站离百度收录进了一步,具体要让我们的网站被百度收录,还是需要专门去研究SEO了,这里不介绍了。
下面介绍如何设置,还记得配置网站信息在那个文件吗?在_config.yml里面
这样我们就可以通过hexo d -g
一键部署啦
hexo g
hexo d
分成两步也可以
参考资料
- Hexo官方网站 : https://hexo.io/
- Github pages : https://pages.github.com/