- 首先附上小编自己的博客:
http://www.hiekay.com/2018/09/04/github-hexo-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/
准备工作
1、安装git (自己搞定)
2、配置 git
生成秘钥:
git config --global user.email "xxx@qq.com" # 填写你github注册并且验证的邮箱
git config --global user.name "xxxx" # github 用户名
ssh-keygen # 会出现下面的内容,一直按Enter键就行
Generating public/private rsa key pair.
Enter file in which to save the key (/home/logan/.ssh/id_rsa):
/home/username/.ssh/id_rsa already exists.
Overwrite (y/n)? #因为我已经生成过了所以提示,一直回车即可
打开用户目录下的 .ssh 目录下面生成 id_rsa(私钥) id_rsa.pub(公钥)两个文件,
打开id_rsa.pub,复制里面的内容,到github
添加完之后
- 3、测试
ssh -T git@github.com
输出 You've successfully authenticated 表示添加key 成功.
一、注册 github账号
二、建仓库
- 1、新建仓库
- 2、填写仓库名,创建仓库,用于放网站
- 3、开启github pages
开启 github pages
- 4、再建一个仓库用于放文章、配置。 这个仓库名字随意,比如:blogSource
三、创建本地仓库
准备工作
- 1、找一个目录来作为你本地的仓库,比如我的是”D:\gitblog”,那么就在gitblog文件夹下初始化仓库,将第二步中创建的放网站的仓库clone到该文件夹中。
git clone xxx.git
四、安装hexo
- 准备工作:node官网 https://nodejs.org/en/ 下载安装最新版的node.js ,自行安装。
node -v //查看版本
- 1、安装 ,打开git 或cmd
npm config set registry http://registry.cnpmjs.org/ # node 的源有很多,切换方式也很多,可以自行选择
npm install hexo -g #全局安装hexo,可能需要3分钟 出现warn警告信息不用管。
npm update hexo -g # 更新
因为Hexo 3.0 把服务器独立成了个别模块,您必须先安装才能使用。
npm install hexo-server --save #安装服务
npm install hexo-deployer-git --save
- 2、初始化 hexo , 我是在文件夹”D:\gitblog\hexo”下
> mkdir hexo #创建一个文件夹,初始化hexocd hexo
> hexo init # 初始化 hexo 文件夹 成功就会提示
当你看到Start blogging with Hexo! 恭喜!框架就已经搭建好了
执行以下命令就可以在本地起服务,进入hexo 目录下
> hexo server
然后访问[http://localhost:4000/](http://localhost:4000/),就能看到自己博客的雏形了
![image](http://upload-images.jianshu.io/upload_images/5110710-112987a2d27d3620?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
hexo文件夹的作用
hexo/_config.yml #这个是hexo 配置文件
hexo/.deploy_git/ # 这个目录下面存放的是hexo 自带的git 配置
hexo/node_modules/ # hexo 需要的node js 模块
hexo/.npmignore # 文件里面存放的是npm需要忽略的文件
hexo/package.json # node.js 的配置文件
hexo/public/ # 存放要生成的静态网页
hexo/scaffolds/ # 生成文档的格式,用于 hexo new 命令 默认是post格式
hexo/source/ # 存放hexo new 生成的源文件,我们写的博客就是在这里
hexo/themes/ # hexo 的主题 都在这里面
- 3、hexo相关命令
1\. hexo new [layout] "file_name" # 新建 file_name 文章
# hexo new 文章名字 会创建个file_name.md 的文档
# 里面有一些默认的格式,文档的路径 hexo/source/_posts/
# layout 默认的是post 即scaffolds里面的的post文件
# 不写就是默认的,layout 可以自己配置
2\. hexo generate # 生成静态文档,将文章生成为博客的一部分,可简写为 hexo g
3\. hexo clean # 清理缓存文件 数据等(非必须),一般上传前线clean再generate
4\. hexo server //本地预览(非必须), 可简写为 hexo s
5\. hexo deploy //推送到GitHub,可简写为 hexo d
- 4、hexo配置,配置文件 hexo/_config.yml 根据注释配置自己的
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: hiekay's blog #网站标题
subtitle: 分享技术的阳光地带 # 副标题
description: Recoding my grow of technology. # 介绍
author: hiekay # 作者
language: zh-CN # 语言
timezone: # 时区
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: [https://hiekay.github.io/](https://hiekay.github.io/) # 填写github pages 生成的那个网址就ok
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory 目录对应的文件
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing 这里也是 写文章相关的默认配置
new_post_name: :title.md # File name of new posts
default_layout: post #默认layout方式
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #将文件名转换为小写或大写,1.小写,2.大写,0.不转换
render_drafts: false # 渲染草稿
post_asset_folder: false # 开启Assert 文件夹
relative_link: false # 相对路径
future: true
highlight: # 代码高亮
enable: true #是否启动
line_number: true # 行号
auto_detect: false # 自动检测语言类型
tab_replace: # tab 键代替几个空格
# Category & Tag 标签和分类
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: maupassant # 这里配置主题直接写主题的名字就行
# Deployment 我们需要注意就就是这里
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
repo: git@github.com:hiekay/hiekay.github.io.git
# repo 很多人说不会填写,其实很简单,到你的开启github pages的仓库
# 页面,里面有一个 git clone 的git 地址,复制就可以了不会出错
# 最后注意是 git 类型的,不要复制 https 开头的
注意开始的url 和 最后的 deploy 选项,最后配置完成测试一下.
- 5、hexo 主题设置
**参考: https://www.haomwei.com/technology/maupassant-hexo.html **
打开链接:https://github.com/tufu9441/maupassant-hexo
1、点击右上角的Fork 按钮,然后你的github 仓库就会出现这个主题了
git clone 你自己的仓库的主题.git hexo/themes/maupassant (一定要是maupassant 文件夹,如果不是自己重命名)
cd D:\gitblog\hexo\themes
git clone xxx.git
** 路径要对,可以根据自己的情况,不过一定的是 themes 目录下的**
** maupassant 文件夹,这个文件夹肯定不存在,git 会自己创建的**
以后你对主题做的修改就不会丢失而且载搭建博客就会方便很多 ,修改完,记得 git push 就行.
2、保存
cd D:\gitblog\hexo
npm install hexo-renderer-jade –save
npm install hexo-renderer-sass –save
3、编辑Hexo目录下的 _config.yml,将theme的值改为maupassant
4、自己再启动看一下网站主题
5、部署到网上
保证上面都配置对了。
hexo clean
hexo g //hexo generate
hexo d // hexo deploy
现在就是见证奇迹的一刻,打开你的Git网址
成功了!最后执行:(hexo clean -->hexo generate -->hexo deploy)
你就可以看到你的博客了
记住,每次修改配置信息或者其他必须要执行上面的步骤,才可以使得配置信息生效。
- 1、新建新建一篇博客,在cmd执行命令:hexo new post “博客名”
hexo n "hai"
可以看到新建的文章
使用编辑器编好文章,那么就可以使用命令:hexo d -g,生成以及部署,该文章了。
到这也就完成了博客搭建,下面介绍的是进阶篇。
六、换成自己的域名
- 1、首先你需要自己购买好了一个域名。我是在阿里云上买的域名。然后在域名管理控制台,将域名解析与博客地址映射。
首先在本地 cmd 中 ping hiekay.github.io 得到ip。
然后在域名解析中配置好
- 2、Hexo目录下的source中建一个CNAME命名的文件夹(切记没有后缀)
内容写你的域名: www.hiekay.com
- 3、在github中配置域名,在setting 中配置自己的域名。
最后执行:(hexo clean -->hexo generate -->hexo deploy)
七、配置script,用本地Markdown 编辑器。
在Hexo中新建一篇博文非常简单,只需要在命令行中键入以下命令然后回车即可:
hexo new "The title of your blog"
此后Hexo便会在Hexo的根目录的source文件夹下的_posts目录下自动帮你创建相应的md文件。然后我们打开该目录,找到刚刚Hexo自动生成的文件打开编辑即可。
但是当我们的博文比较多,这样我们就需要在成堆的Markdown文件中找到刚才自动生成的文件,这样做显然是一件比较痛苦的事情。
hexo 提供相应的js 脚本,可以在hexo new 之后,使用你想用的应用打开 新建的文章。
首先在Hexo目录下的scripts目录中创建一个JavaScript脚本文件。
如果没有这个scripts目录,则新建一个。
scripts目录新建的JavaScript脚本文件可以任意取名,例如:new_open.js
通过这个脚本,我们用其来监听hexo new这个动作,并在检测到hexo new之后,执行编辑器打开的命令。
- 1、windows ,如果你是windows平台的Hexo用户,则将下列内容写入你的脚本:
var spawn = require('child_process').exec;
// Hexo 2.x 用户复制这段
hexo.on('new',function(path){
spawn('start "markdown编辑器绝对路径.exe" '+ path);
});
// Hexo 3 用户复制这段
hexo.on('new',function(data){
spawn('start "markdown编辑器绝对路径.exe" '+ data.path);
});
eg:
var spawn = require('child_process').exec;
// Hexo 3 用户复制这段
hexo.on('new',function(data){
spawn('start "D://Program Files//Story//nw.exe" '+ data.path);
});
- 2、mac ,如果你是Mac平台Hexo用户,则将下列内容写入你的脚本:
var exec =require('child_process').exec;
// Hexo 2.x 用户复制这段
hexo.on('new',function(path){
exec('open -a "markdown编辑器绝对路径.app" '+ path);
});
// Hexo 3 用户复制这段
hexo.on('new',function(data){
exec('open -a "markdown编辑器绝对路径.app" '+ data.path);
});
- 3、linux
# 如果使用vi的这样写
# hexo 3.x 路径是[data.path] hexo
2.x 路径是 [path]
var editor = process.env.EDITOR || 'vi';
var child = require('child_process').spawn;
hexo.on('new', function(data){
child(editor, [data.path], {
stdio: 'inherit'});
});# 使用sublime var child = require('child_process').spawn;
hexo.on('new', function(data){
child(subl, [data.pat);
});
保存并退出脚本之后,在命令行中键入:
hexo new" auto open editor test"
是不是就顺利的自动打开了自动生成的md文件啦~
八、配置图床,博文中的图片
博主推荐七牛云 ,首页-七牛云 ,自行注册。
选择对象存储,内容管理,添加资源,然后你可以设置图片的格式,大小水印,这个按照步骤一个没有问题 。
图片的添加,通过–>更多操作–>内容管理 –>上传文件
图片外链就在图片操作选项里,直接复制到blog,片样式需要在图片外链后加上 “?图片样式”。
-1、qshell 命令行工具 ,
链接:[首页-七牛云qshell ](https://developer.qiniu.com/kodo/tools/1302/qshell)
[首页-七牛云qshell ](https://github.com/qiniu/qshell)
下载 qshell 工具之后,配置环境变量。
https://developer.qiniu.com/kodo/kb/1685/using-qshell-synchronize-directories
配置账户
qshell account AK SK
qshell account // 验证
在当前用户主目录中生成 qshell 目录:account.json //C:\Users\hiekay.qshell
使用qupload 命令同步本地图片到七牛云。
- 2、qshell 使用,配置文档,
配置config
# 这是我的 config 配置文件 upload.conf
{
"src_dir" : "D:\\gitblog\\qshell\\source", //本地同步路径,为全路径格式
"bucket" : "blog", //同步数据的目标空间名称
"key_prefix" : "blog", //在保存文件在七牛空间时,使用的文件名的前缀,默认为空字符串
"ignore_dir" : true, //保存文件在七牛空间时,使用的文件名是否忽略本地路径,默认为false
"check_exists" : true, //每个文件上传之前是否检查空间中是否存在同名文件
"overwrite" : true, //是否覆盖空间中已有的同名文件,默认不覆盖。
"rescan_local" : true //默认情况下,本地新增的文件不会被同步,需要手动设置为true才会去检测新增文件。
}
- 3、上传
qshell qupload [并发数] [本地上传配置文件]
进入 .qshell 目录下
qshell qupload 3 upload.conf
进入七牛云查看
九、配置git source 保存文章。
这里就是使用git 管理博客的文章了
- 1、建立git仓库
cd hexo
git init
-2、 编辑gitignore,忽略不想上传的文件 ,
在.gitignore 文件中添加以下内容
.DS_Store
Thumbs.dbdb.json*.lognode_modules
public.deploy*
debug.logindex.html.npmig*
themes
package.json
*~
- 3、添加远程仓库 *
git remote add origin 此处填写我们第一步建立的第二个仓库的git clone 的那个git地址
git remote add origin xxx.git
- 4、 添加文件夹,不会添加已经写在 .gitignore文件里面的文件
git add .
- 5、 提交到远程仓库
git commit-a-m"commit first"
git push origin master
注意:
在设置图标的时候一直没办法替换点原来的 后来发现 改名后的ico要放在所用主题的 source 下才行 而不是 根目录下的source(值得一提,解析24小时候 域名自带的logo才会消失