- 为什么选择hexo?
- 搭建博客的基本步骤
- 部署到Github Pages
- 域名解析
为什么选择hexo?
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
搭建博客的基本步骤
- 购买域名
- 安装hexo
- 注册github
一:购买域名
若小胖友们想把个人博客挂到属于自己的域名上,博主在这里建议大家提前把域名买好。
博主购买域名的地方是万网,注册登录后,填写你想要的域名
选择完自己域名后,付费就可以了!
(博主建议个人域名选择.me为后缀的较好-博主的域名就为carryguan.me)
二:安装hexo
装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:
Git
Node.js
若你是IT小白,安装git/node没成功,博主carry给你个福利贴士
(博主就是这样一点点过来的 (# ̄▽ ̄#))
windows安装git
windows安装node.js
如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。
先进入一个文件夹路径:例如我的在这里建议小胖友们,先预习一下:
git入门教程
github趣味详解
再执行下面的命令:
npm install -g hexo-cli
初始化框架
执行如下语句
hexo init blog
(blog是我自己建立的用来装博客的文件夹)
2:再执行
cd blog
3: 最后执行
npm install
以上三条语句执行完毕后, 你会在blog文件夹里看到如下:
├── _config.yml //网站的配置信息,您可以在此配置大部分的参数。
├── package.json
├── scaffolds //模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
├── source //资源文件夹是存放用户资源的地方。
| ├── _drafts
| └── _posts
└── themes //主题文件夹。Hexo会根据主题来生成静态页面
最后看看你自己的个人网站:
在blog目录下执行gitbash命令:
1:新建一篇文章(我的第一篇文章)
hexo new "我的第一篇文章"
会在/source/_post里自动生成了“我的第一篇文章.md”文件,之后新建的文章都将存放在此目录下。编辑“我的第一篇文章.md”文件可修改内容。
2:生成网站
hexo generate (可简写成 hexo g)
3:启动本地服务器
hexo server (可简写成 hexo s)
4:在浏览器输入http://localhost:4000 即可查看网站。
三:注册github
github
填写完相应信息,注册成功后,重新登录,进入到这个页面
点击图片中所圈位置出现了如下:
Repository name里填写:你的用户名.github.io
(例如我的用户名是sunningcarryhaha,所以我的Repository name:sunningcarryhaha.github.io)
Description里随便填一下你的描述就好
Public选中
选中Initilize this respository with a README
最后点击绿色按钮创建
创建成功后
配置SSH-Key
详细步骤请点击此文章
将blog部署到Github Pages 上
两种方法:
- 使用hexo deploy部署
- 使用git push 部署
1:hexo deploy部署
找到blog目录下的配置文件_config.yml,用编辑器打开此文件
找到此文件中的deploy字段,按照以下配置
deploy:
type: git
repo: git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git
branch: master
注意需要提前安装一个扩展:
$ npm install hexo-deployer-git --save
然后在命令行中执行
hexo d
不幸的是,上述命令虽然简单方便,但是偶尔会有莫名其妙的问题出现,因此,我们也可以追本溯源,使用git命令来完成部署的工作。
2:使用gitbash,将public文件夹上传到自己的仓库中
第一步:进入到你的blog目录
cd blog
第二步 :初始化博客
hexo g
第三步:把public文件夹上传到github仓库中
cd public
git init (初始化本地仓库)
git add . (将本地文件加到仓库里)
git commit -m "message" (设置提交信息)
git remote add origin git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git(本地仓库链接远程仓库)
git push -u origin master (push文件到仓库中)
git@github.com:sunningcarryhaha/sunningcarryhaha.github.io.git
解释一下 :
sunningcarryhaha是用户名
sunningcarryhaha.github.io 是仓库名称
.git是后缀
详细的步骤可参考此
github push
git github 问题总结
部署成功以后,在浏览器中输入你的repository名字:例如我的sunningcarryhaha.github.io
就可以看到你的网站了
域名解析
- 进入万网进行域名绑定
- 进入public,新建CNAME
- 把域名写到CNAME里
-
传到github仓库里
1:进入万网进行域名绑定
安照以上图片进行操作
** 尤其注意:记录值那里填写的是:sunningcarryhaha.github.io.,也就是你的仓库名字后还有个"." **
以上进行完毕后,接着下一步
2:进入blog下的public文件夹,新建 CNAME
3:将public文件夹下的CNAME上传到github仓库中
如果上传成功的话,进入到你的github仓库中会看到CNAME文件
4:为了防止域名解析出问题,博主建议将blog下的public下的CNAME文件,复制到blog下的source文件夹里,这样更新public,不会出现CNAME文件丢失的情况
如果以上步骤都进行完毕的话,博主carry恭喜你:bowtie:,小胖友你zen棒,现在在浏览器输入你的域名,就可以成功的看到你的个人网站啦!
当然这个网站还可以换主题,美化!这方面的文章敬请期待,博主会继续出博文的!
这个博客博主搭建了好久,走了好多弯路(原谅博主比较笨,呜呜!)
期间出了好多问题,最根本的原因是博主git方面不基础不好,所以建议小胖友们多练习一下git
这里推荐:
git入门教程
node.js安装菜鸟教程
git上传代码到github仓库
hexo官网
markdown入门
hexo主题推荐
next-hexo主题
hexo常见问题解决方案