
引言
个人博客
什么是Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
超快的渲染速度、丰富的插件支持、一件部署到Github Pages
如果你厌烦了csdn、简书、博客园..等等,那么来创建自己的个人网站
描述
安装所在环境Mac,hexo+git 建站
必备
- Node.js
- git
操作步骤
一. 下载Node
管理工具nvm
-
使用cURL安装
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
-
使用Wget安装
> wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
二. 安装Node
管理工具nvm
nvm install stable
-
问题
-
Command not found
需要在你的shell环境中source ~/.bashrc
- zsh .zshrc
- bash .bash_profile
-
nvm安装的时候下载缓慢、超时
需要更换源地址 在~/.bashrc
添加
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
-
- 安装成功
xxxx $ nvm install stable
Downloading and installing node v10.3.0...
Downloading https://npm.taobao.org/mirrors/node/v10.3.0/node-v10.3.0-darwin-x64.tar.gz...
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v10.3.0 (npm v6.1.0)
Creating default alias: default -> stable (-> v10.3.0)
![]()
三. 安装Hexo
$ npm install -g hexo-cli
安装成功
[fsevents] Success: "路径" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ hexo-cli@1.1.0
added 171 packages from 369 contributors in 10.607s
四. 建站
1. 输入命令建站
$ hexo init 路径<folder>
$ cd 路径<folder>
$ npm install
2. 目录的结构
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
3. 目录介绍
- _config.yml
网站的配置
信息,具体介绍请到官网查看戳我 - package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.0.0",
"hexo-generator-archive": "^0.1.0",
"hexo-generator-category": "^0.1.0",
"hexo-generator-index": "^0.1.0",
"hexo-generator-tag": "^0.1.0",
"hexo-renderer-ejs": "^0.1.0",
"hexo-renderer-stylus": "^0.2.0",
"hexo-renderer-marked": "^0.2.4",
"hexo-server": "^0.1.2"
}
}
4. scaffolds
- 模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
- Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
5. themes
- 主题 文件夹。Hexo 会根据主题来生成静态页面。
五. 部署
1. 安装hexo-deployer-git
$ npm install hexo-deployer-git --save
2. 修改配置
deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]
参数 | 描述 |
---|---|
repo | 库(Repository)地址 |
branch | 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测 |
message | 自定义提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}) |
注意
添加git repo
的时候需要创建一个yourname.github.io
仓库, 访问的时候直接访问https://yourname.github.io 就能够直接访问你的个人博客
3. 生成静态文件
$ hexo generate
#简写
$ hexo g
#Hexo 能够监视文件变动并立即重新生成静态文件,
#在生成时会比对文件的 SHA1 checksum,只有变动的文件才会写入。
$ hexo generate --watch
4. 部署网站
$ hexo deploy
可以将生成静态文件跟部署命令合并
$ hexo generate --deploy
$ hexo deploy --generate
#简写
$ hexo g -d
$ hexo d -g
六. 成功以后设置github pages
-
选择你的博客仓库 -> Settings
-
选择github pages主题随便选择一个,就会出现一个网址,这个网址就是你的博客地址了
直接输入上面给的youname.github.io,走起!
当然你也可以不选主题,后面有很多扩展😄🤔
扩展
配置自定义域名
这里使用CHAME将域名指向另外的一个域名
-
有时候看着这么个域名,感觉差强人意,不是很叼的样子(怎么说也的虎得住不懂的人吧,名字最起码一看专用)
-
首先去买一个域名,哪的都行,解析域名。
-
最后两种方式来让域名直接映射到你的
youname.github.io
的域名- 在你的本地根目录的
source
中创建一个CHAME的文件,添加你的自定义域名:比如说是"www.cus.com"
hexo clean hexo g -d
** 哦可!**
-
在你的git博客仓库中,点击setting,添加你的CusDomain
- 在你的本地根目录的
最后使用你的自定义域名就可以访问你的个人博客
兄弟开整吧
网友评论