系统环境配置
1 | Node.js |
安装Hexo
1 | cd hexo |
Hexo 常用命令
hexo g 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
hexo s 启动本地web服务,用于博客的预览
hexo d 部署播客到远端1
2hexo new 'postName' --- 新建文章
hexo new page "pageName" --- 新建页面
常用简写
1 | hexo n == hexo new |
目前安装所用的本地环境如下:(可以通过hexo -v查看)
Hexo 主题设置
安装主题1
2hexo clean
git clone https://github.com/iissnan/hexo-theme-next.git themes/next
启用主题
修改Hexo目录下的_config.yml配置文件中的theme属性,将其设置为next
更新主题1
2
3
4cd themes/next
git pull
hexo g # 生成
hexo s # 启动本地web服务器
部署Hexo到Github Pages
使用hexo deploy部署
修改Hexo目录下的_config.yml配置文件1
2
3
4deploy:
type: git
repo: git@github.com:username/username.github.io.git
branch: master
需要提前安装一个扩展1
npm install hexo-deployer-git --save
然后在命令行中执行1
hexo d
使用git命令行部署
1 | cd hexo/blog |
将github上创建的博客克隆到本地,新建一个目录叫做.deploy用于存放克隆的代码
创建一个deploy脚本文件1
2
3
4
5
6hexo generate
cp -R public/ .deploy/username.github.io
cd .deploy/username.github.io
git add .
git commit -m “update”
git push origin master
图片显示
- cd到博客根目录下 查看_config.yml文件 查找 post_asset_folder 字段确定post_asset_folder 设置为true -> post_asset_folder:true
- 当您设置 post_asset_folder 参数后,在建立文件时,Hexo 会自动建立一个与文章同名的文件夹,您可以把与该文章相关的所有资源都放到此文件夹内,这样就可以更方便的使用资源。
- 到博客的根目录下执行 npm install https://github.com/CodeFalling/hexo-asset-image –save 命令来进行插件的安装。
- 然后创建一文章 hexo new “test” 然后查看博客的 ../source/_posts 目录下的文件,会看到存在一个 test 文件夹和 test.md 文件,文件夹中放入图片1.jpg
- 文中引用图片
![](test/1.jpg)
Hexo 配置主题
主题配置在themes文件下_config.yml
设置主题风格
打开themes/next下的_config.yml文件,搜索 scheme关键字,将你需用启用的scheme 前面注释 # 去除即可。1
2
3
4
5
6
7
8
9# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse # 默认 Scheme,默认版本
#scheme: Mist # Muse 的紧凑版本
scheme: Pisces # 双栏 Scheme
#scheme: Gemini # 类似 Pisces
添加头像
打开themes/next下的_config.yml文件,搜索 Sidebar Avatar关键字,去掉avatar前面的#1
2
3
4# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: http://example.com/avatar.png
或者使用本地图片,把图片放入themes/next/source/images下,修改avatar
1 | avatar: /images/blogLogo.png |
设置阅读原文
用编辑器打开themes/next 目录下的_config.yml文件
找到代码:1
2
3auto_excerpt:
enable: false
length: 150
将enable的 false改成true,length可以设定文章预览的文本长度。
社交链接
打开themes/next下的_config.yml文件,搜索关键字social,然后添加社交站点名称与地址即可。1
2
3
4
5
6
7
8# Social links
social:
GitHub: https://github.com/your-user-name
Twitter: https://twitter.com/your-user-name
Weibo: https://weibo.com/your-user-name
douban: https://douban.com/people/your-user-name
zhihu: https://www.zhihu.com/people/your-user-name
# 等等
友情链接
打开themes/next下的_config.yml文件,搜索关键字Blog rolls1
2
3
4
5
6
7# Blog rolls
links_title: 友情链接 #标题
links_layout: block #布局,一行一个连接
#links_layout: inline
links: #连接
baidu: http://example.com/
google: http://example.com/