大概分为以下步骤
- 环境准备(node.js、git、github)
- 安装Hexo
- 配置Hexo
- 把Hexo和github pages连接起来
- 发表文章
- 博客主题推荐
- NexT主题的简单配置
- 增加404公益广告页
环境准备
大概分为以下3个步骤
-
Node.js 安装
-
Git 安装
-
Github 账号配置
-
Node.js 安装
-
node.js 下载 : Windows Installer 64-bit v12.16.1
-
install : 下一步直到结束
-
检查是否安装成功.
node -v npm -v
如果失败, 将node.exe加进环境变量
-
-
Git 安装
-
git 下载 : Git
-
install : 下一步直到结束
-
检查是否安装成功
git --version
-
-
Github 账号配置
-
- yourname和github name相同
* 点击launch automatic page generator
安装Hexo
-
在node.js的安装路径下文创建node_global and node_cache文件夹
-
然后
npm config set prefix node.js的安装路径\node_global npm config set cache node.js的安装路径\node_cache
-
接下来安装
npm install hexo-cli -g mkdir hexo cd hexo hexo init npm install hexo --save
-
检查是否安装成功
配置Hexo
hexo g
hexo s
Then come back INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
Do not press Ctrl+C or it will stop.
-
打开http://0.0.0.0:4000/在浏览器中将出现:
连接Hexo和github pages
大概分为以下步骤
-
配置个人git信息(如果是第一次)
git config --global user.name "wolfnx" git config --global user.email "lostnx@gmail.com" ssh-keygen -t rsa -C "lostnx@gmail.com"
-
打开文件hexo下的_config.yml,找到deployment并按如下修改:
deploy: type: git repo: git@github.com:yourname/yourname.github.io.git branch: master
yourname是github名称
发布
-
创建一篇信的博客名叫buildblog。
hexo new post "buildblog"
此时D:/Develop/Hexo/source_posts下就会buildblog.md文件,你可以编辑这个文件通过markdown编辑器。
hexo g //generate hexo d //deploy hexo d -g //generate before deploy
如果"deployer not found:git" appears,你必须安装:
npm install --save hexo-deployer-git
博客主题推荐
NexT
这个主题简单而美丽。 目前,Github上Star最高的Hexo主题支持几种不同的样式。 作者提供了非常完整的配置说明。
NexT主题的简单配置
-
Hexo中有两个主要的配置文件,名称均为_config.yml。 其中之一位于站点的根目录,主要包含Hexo本身的配置; 另一个位于主题目录中,此配置由主题作者提供,主要用于配置与主题相关的选项。
-
为了便于描述,在以下描述中,前者称为站点简档,而后者称为主题简档。
-
安装NexT
Hexo安装主题的方法非常简单,只需将主题文件复制到站点目录的主题目录,然后修改配置文件。
cd yoursite/theme git clone https://github.com/theme-next/hexo-theme-next next
-
打开主题
打开站点配置文件,找到主题字段并将其值更改为next。
theme: next
-
验证主题
首先启动Hexo本地站点,然后打开调试模式。
hexo s -debug
or
hexo s --debug
在命令行输出中提示:
NFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
现在,您可以使用浏览器访问http://localhost:4000,检查该站点是否正常运行。
-
theme配置
你可能需要访问外网
-
增加404公益广告页
GitHub Pages具有创建404页面的准则: Custom 404 Pages
推荐使用Tencent Public Welfare 404
创建一个404.html文件并将其放在以下路径中:
Html Content:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"charset="utf-8" homePageUrl="/"
homePageName="Back to my homepage">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8">
</script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8">
</script>
</body>
</html>
参考
http://theme-next.iissnan.com/getting-started.html
转载请注明出处:http://www.wolfnx.com/2017/03/27/BuildBlog
作者 : wolfnx
邮箱 : wolfnx@outlook.com
邮箱2 : lostnx@gmail.com