什么是 Hexo,什么是 NexT 主题?
Hexo 是一个基于 Node.js 的静态站点生成框架,快速、简洁且高效。Hexo 主要使用 Markdown 解析文章,在几秒内,即可利用靓丽的主题生成静态网页。NexT 是其一个非常简洁优雅的主题。
什么是 Markdown?
Markdown 用过一些简单的标记,让你的文字实现精致的排版,实现易读易写,无需考虑美化,专注文字本身。什么是 GitHub ?
GitHub 是基于 Git 技术的社交编程及代码托管网站。你可以用它对你的项目进行版本控制,也可以浏览学习、参与开发别人的开源项目,甚至可以交友。如何把这些名词串联起来?
安装必要的软件后,使用 Hexo 创建你的本地博客,生成静态页面;
将静态页面托管到 GitHub 上,这样别人就可以通过公开网址访问你的博客了;
下载 NexT 主题美化你的博客样式。
安装 Git(基本使用教程自己寻找)
1 | Windows:下载后一路安装 git-for-windows(国内下载点) |
1.安装 Node.js
1 | Mac / Linux:使用 curl 或 wget 下载安装 |
2.安装hexo
1 | 进入Git Bash,使用以下命令安装hexo($是提示符) |
3.创建博客目录
1 | 接下来创建放置博客文件的文件夹:yangql881012.github.io文件夹。我hexo文件夹的位置为E:\学习资料\97_github\yangql881012.github.io,名字和地方可以自由选择。之后进入文件夹,即E:\学习资料\97_github\yangql881012.github.io内,点击鼠标右键,选择Git Bash,执行以下命令,Hexo会自动在该文件夹下下载搭建网站所需的所有文件。 |
4.部署本地文件到github
既然Repository已经创建了,当然是先把博客放到Github上去看看效果。编辑E:\学习资料\97_github\yangql881012.github.io下的_config.yml文件,建议使用Notepad++。
在_config.yml最下方,添加如下配置(命令中的第一个yangql881012为Github的用户名,第二个yangql881012.github.io为之前New的Repository的名字,记得改成自己的。另外记得一点,hexo的配置文件中任何’:’后面都是带一个空格的),如果配置以下命令出现ERROR Deployer not found : github,则参考上文的解决方法。
1 | deploy: |
5.hexo的配置文件
hexo里面有两个常用到的配置文件,分别是整个博客的配置文件E:\学习资料\97_github\yangql881012.github.io\_config.yml和主题的配置文件E:\学习资料\97_github\yangql881012.github.io\themes\next\_config.yml,此地址是对于我来说,hexo3.0使用的默认主题是landscape,因此你们的地址应该是E:\学习资料\97_github\yangql881012.github.io\themes\landscape\_config.yml,可在这两个文件里修改相应的配置信息。
博客配置文件 _config.yml
主题配置文件 _config.yml
6.发布一篇文章
在Git Bash执行命令:1
$ hexo new "my new post"
在source/_post文件夹下中打开my-new-post.md,打开方式使用记事本或notepad++。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24title: my new post #文章标题
date: 2016-11-12 22:56:29 #发表日期,一般不改动
categories: blog #文章文类
tags: [博客,文章] #文章标签,多于一项时用这种格式,只有一项时使用tags: blog
\---
\#这里是正文,用markdown写,你可以选择写一段显示在首页的简介后,加上
<\!--more-->#在<\!--more-->之前的内容会显示在首页,之后的内容会被隐藏,当游客点击Read more才能看到。
写完文章后,你可以使用以下命令:
$ hexo g #生成静态文件。
$ hexo s #在本地预览效果。
$ hexo d #同步到github
使用你的地址进行访问。
hexo部署后,CNAME会被自动删除,怎么办?自己的独立域名需要用CNAME连接到github pages
把’README.MD’文件的后缀名改成”MDOWN”然后扔到blog/source文件夹下即可,这样hexo不会解析,github也会将其作为MD文件解析
只需要将将需要上传至github的内容放在source文件夹,例如CNAME、favicon.ico、images等。
第3章 安装nexT
1 | Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下配置文件即可。具体到 NexT 来说,安装步骤如下。 |
2.启用主题
与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。
1 | theme: next |
到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存。
3.验证主题
首先启动 Hexo 本地站点,并开启调试模式(即加上 –debug),整个命令是 hexo s –debug。 在服务启动的过程,注意观察命令行输出是否有任何异常信息,如果你碰到问题,这些信息将帮助他人更好的定位错误。 当命令行输出中提示出:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。
4.主题设定
Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:
Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
Mist - Muse 的紧凑版本,整洁有序的单栏外观
Pisces - 双栏 Scheme,小家碧玉似的清新
Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 即可。1
2
3
4
5<p>
#scheme: Muse
#scheme: Mist
</p>
scheme: Pisces
更多信息请见nexT官方文档
第四章 图片使用
1.首先确认_config.yml中有:
1 | post_asset_folder: true |
2.然后在/下执行
1 | npm install https://github.com/CodeFalling/hexo-asset-image --save |
3.确保在source/_posts下创建和md文件同名的目录,在里面放该md需要的图片,然后在md中插入
1 |
|
首次配置完了需要执行一次清除操作,再生成页面:
1 | $ hexo clean |
【源代码托管】
源代码用于生成静态页面,一直放在本地的话,用其他电脑就不方便修改了。所以可以源代码托管到 GitHub 上。网上将源代码托管到博客的 Repository 的新建分支中会出现主题文件夹无法同步的问题。这里采用新建 Repository 的方法实现源代码托管。
上传源代码到 GitHub
确认源代码下 .gitignore 内容:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
GitHub 上新建 hexo_blog 仓库,复制 Clone or download 下的在线地址。
git init
git remote add origin server # hexo_blog 仓库的在线地址
git add . #添加 blog 目录下所有文件,注意有个'.' ( .gitignore 里面声明的文件不在此内)
git commit -m "hexo source first add" # 添加更新说明
git push -u origin master # 推送更新到 git 上
这里有个坑需要注意一下,就是创建远程仓库的时候,如果你勾选了Initialize this repository with a README(就是创建仓库的时候自动给你创建一个README文件),那么到了第五个你将本地仓库内容推送到远程仓库的时候就会报一个failed to push some refs to https://github.com/guyibang/TEST2.git的错。
这是由于你新创建的那个仓库里面的README文件不在本地仓库目录中,这时我们可以通过以下命令先将内容合并以下:
1 | $ git pull --rebase origin master |
这时你再push就能成功了。
下载源代码到另一台电脑
配置好 Git,SSH,初始化 Hexo 环境后,新建博客的本地文件夹:1
2
3
4
5
6
7
8
9git init # 将目录添加到版本控制系统中
git remote add origin server # 同上
git fetch --all # 将 git 上所有文件拉取到本地
git reset --hard origin/master # 强制将本地内容指向刚刚同步 git 云端内容
reset 对所拉取的文件不做任何处理,此处不用 pull 是因为本地尚有许多文件,使用 pull 会有一些版本冲突,解决起来也麻烦,而本地的文件都是初始化生成的文件,较拉取的库里面的文件而言基本无用,所以直接丢弃。
从 GitHub 仓库中更新源代码
git pull # 更新源代码
由于主题文件也是第三方git库,提交后第三方主题文件夹为空,我们通过 git submodule 来同步第三方主题
【域名绑定】
1 | 购买域名 |
【主题美化】
1 |
|
hexo文档
https://hexo.io/zh-cn/index.html
next文档
http://theme-next.iissnan.com/getting-started.html
转自:
作者:戴戴Day
链接:http://www.jianshu.com/p/d34e9531cfce
作者:不圆的石头
链接:http://www.jianshu.com/p/c07ccdfba068