前言
你需要准备:
GitHub账号,git,node.js,npm
注:本此搭建是在Windows10下完成。
搭建GitHub博客
搭建github仓库
登陆你的GitHub,新建一个repository,名字使用: 你的用户名.github.io 。也就是说,如果你github的名字是 hello ,那么你新建的仓库名为:hello.github.io 。必须这样做,别的仓库名无效。将来你的博客访问地址就是:http://hello.github.io 。
安装hexo
Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具,支持Markdown格式,有众多优秀插件和主题。
官网: http://hexo.io
github: https://github.com/hexojs/hexo
此次使用git bash 来完成安装
1.npm install -g hexo-cli
安装完成后要新建一个hexo的文件夹,作为存放代码的地方,我就直接放在桌面了
2.hexo init ~/Desktop/myBlog
3.npm i
4.hexo new myifrstblog
生成我们的第一篇博客,这里会生成一个路径,指向博客md文件。
5.start md文件路径
,开始编辑博客内容。这里我使用Typora的软件。
6.start _config.yml
这个文件用来编辑网站的配置
把第 6 行的 title 改成你想要的名字
把第 9 行的 author 改成你的名字
把最后一行的 type 改成 type: git
在最后一行后面新增一行,左边与 type 平齐,加上一行 repo: 仓库地址 (请将仓库地址改为「你的用户名.github.io」对应的仓库地址,仓库地址以 git@github.com: 开头
7.npm install hexo-deployer-git --save
安装git部署插件
8.hexo generate
生成静态文件,该命令可简写成 hexo g
9.hexo server
启动服务器。本地预览你的博客默认情况下,访问网址为: http://localhost:4000/
10.hexo deploy
提交到GitHub。该命令可简写成 hexo d
进入「你的用户名.github.io」对应的 repo,打开 GitHub Pages 功能,如果已经打开了,你应该会看到一个预览链接
用浏览器访问「预览链接/index.html」就应该看到了你的博客!(GitHub Pages 存在延迟,如果没看到,过三分钟再刷新看看)
换主题
- https://github.com/hexojs/hexo/wiki/Themes 上面有主题合集
- 随便找一个主题,进入主题的 GitHub 首页,比如我找的是 https://github.com/iissnan/hexo-theme-next
- 复制它的 SSH 地址或 HTTPS 地址,假设地址为 git@github.com:iissnan/hexo-theme-next.git
cd themes
git clone git@github.com:iissnan/hexo-theme-next.git
cd ..
- 将 _config.yml 的第 75 行改为
theme: hexo-theme-next
,保存 hexo generate
hexo deploy
- 等一分钟,然后刷新你的博客页面,你会看到一个新的外观。如果不喜欢这个主题,就回到第 1 步,重选一个主题。
上传源代码
注意「你的用户名.github.io」上保存的只是你的博客,并没有保存「生成博客的程序代码」,你需要再创建一个名为 blog-generator 的空仓库,用来保存 myBlog 里面的「生成博客的程序代码」。
-
在 GitHub 创建 blog-generator 空仓库
echo "# -blog-generator" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:你的名字.gitgit add .
git commit -m '提交到仓库,这是一个注释信息,填写你认为值得写的注释,比如:提交了***'
git push -u origin master
-
这样一来,你的博客发布在了「你的用户名.github.io」而你的「生成博客的程序代码」发布在了 blog-generator。所有数据万无一失,你就不会因为误删 myBlog 目录而痛哭了。
-
以后每次 hexo deploy 完之后,博客就会更新;然后你还要要 add / commit /push 一下「生成博客的程序代码」,以防万一。
-
这个 blog-generator 就是用来生成博客的程序,而「你的用户名.github.io」仓库就是你的博客页面。
网友评论