在我之前写的一片文章 用 github 展示 html 中,介绍了如何使用 github 展示你的静态页面。eg:我完成了一次做一个 uml 试卷的作业。我的 源码,则可以访问 链接。
** 那么问题来了,**如果我的页面不是 demo 中的那样,而是一个比较复杂的页面。例如:博客。我又该怎么办呢?
莫急,看我如何使用 hexo + github 搭建个人博客。
环境配置
- node
- git
- github 账号
当你具备以上条件后,就可以开始搭建属于你的个人博客了。
安装 hexo
npm install -g hexo
初始化
- 新建一个文件夹,并进入该文件夹:
mkdir blog && cd blog
- 初始化:
hexo init
生成静态页面
hexo generate (hexo g 也可以)
本地启动
hexo server
此时访问:localhost:40000
到此应该就可以在本地访问到,如下图:
配置 github
- 建立 repository:仓库名必须为[your_github_name.github.io]。
- eg:我的github 是 bmeritter,所以,我的 仓库名是 bmeritter.github.io
- 将你构建的 项目和你的github 仓库关联起来:
之前初始化的 blog 目录为 :
在该目录下,执行如下命令:
vim _config.yml
在最后面,改成:
deploy: type: git repository: git@github.com:bmeritter/bmeritter.github.io.git branch: master
部署到github
npm install hexo-deployer-git --save
执行部署命令:
hexo deploy
访问https://bmeritter.github.io/
每次部署的步骤
hexo clean hexo generate hexo deploy
一些常用命令
hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server) hexo deploy #将.deploy目录部署到GitHub hexo help #查看帮助 hexo version #查看Hexo的版本
Q & A
Q1:如何让文章想只显示一部分和一个 阅读全文
的按钮?
A1:在文章中加一个 , 后面的内容就不会显示出来了。
Q2:本地部署成功了,也能预览效果,但使用 username.github.io 访问,出现 404 。
A2:首先确认 hexo d 命令执行是否报错,如果没有报错,再查看一下你的 github 的 username.github.io 仓库,你的博客是否已经成功提交了,你的 github 邮箱也要通过验证才行。
遗留问题
- 如果我不小心删了这个仓库,我还能访问吗?
- 如果我不小心删了本地文件夹,我该怎么修改博客内容?
现在再来看看我的个人 博客。
打造专属自己的域名博客,快来试试吧!