一直有搭一个完全属于自己的blog的想法,从摄影旅行呀,技术blog啊,手工作品呀,编曲乐队呀~记录一些人,记录一些事,青春里的点点滴滴,然后各种比赛拖延症一直到现在才有时间,也算是把这次的搭建整个过程给记录下来了,如果有需要的各位就可以直接享用啦!有不对的地方敬请指正!十分感谢!
Build Prepare
服务器: GitHub Pages
域名: 阿里云
框架: Node.js
选择: hexo
其他工具: Git
GitHub Pages
官网的介绍语是Websites for you and your projects,是给个人和个人的项目提供的网站服务。即我们可以把自己在GitHub上的项目寄存到GitHub Pages上。Pages有300M免费空间,偶尔不稳定,且GitHub是一个很有用的工具,借此熟悉GitHub流程
注册GitHub账号
GitHub可以理解为一个注重分享的开源代码社区,每个人看到有趣的Repository都可以Fork到本地来玩,当然在这里不扯这么多,进入网站之后按照提示一步步来即可完成注册,但一定要记得邮箱,因为几乎所有的GitHub通知都会通过邮箱来发送给你。大概会有一个这样的界面,可以按着Guide来走一遍
New repository
登录 GitHub 之后,在页面右上角点击 + 加号按钮,点击 New repository。由于我们是新建一个个人网站项目,所有仓库的名称需要安装 GitHub 个人网站项目的规定来写。 规则就是:
http://YOUR-GITHUB-USERNAME.github.io
。比如我的 GitHub 用户名是 luoda888,那我就要填写http://luoda888.github.io
。选择Public
模式,接着点进仓库即可看到仓库界面(我的是已经有内容了,刚注册时空仓库)。
Git
Git是GitHub的一项非常好用的神器,以后遇见喜欢的项目都可以git clone下来在Mac,Windows上进入网站直接下载安装就好,安装之后打开终端,输入
1 $ Git --version在安装完
Git
之后需要配置SSH
,好处是让你每次Git的时候不需要输入账号密码,接下来检测是否有任意一个SSH秘钥
1 $ Cd ~/.ssh如果有的话,备份这个
SSH Key
12 $ mkdir key_backup$ mv id_rsa* key_backu生成你自己的
GitHub SSH Key
1 $ ssh-keygen -t rsa -C "xxx@xxx.com”添加
SSh key
到GitHub
登录到GitHub
页面,Account Settings
->SSH Public Keys
->Add another key
将生成的key(id_rsa.pub
文件)内容复制到输入框中存档。测试连接及设置个人信息
123 $ ssh git@github.com$ git config --global user.name "xxx”$ git config --global user.email xxx@xxx.com
域名/解析
选择一个自己想要的域名,最近.我爱你
这种域名也有了…挺适合表白的
前往万网根据你自己的想法买买买
之后就是解析域名,把自己的域名和IP地址绑定起来
IP地址则是你的GitHub Pages
对应的地址
Node.js
在Node.js官网选择合适的版本进行下载好后,如mac上,输入以检测版本
Hexo
Choose Hexo
- 同比性能下颜值最高
- 相当多的高颜值主题可供选择
- 静态网站相比于多插件的WordPress可以不依托于价格高昂的服务器
- 对于一个学生狗来说,虽然不是啥大花费,但能省则省总没错
- 维护较为简单,加载网站速度超级快
- 支持归档、分类、标签、Links、关于、目录
- 高度自由的自定义主题
- 支持markdown语法
Install Hexo
找到自己想放置的目录
1 $ cd ~/利用之前配置好的
npm
进行安装并检验是否成功
12 $ npm install -g hexo-cli$ hexo因为有一些东西被Ban掉了,如果安装不了的话
12 $ npm install -g hexo-cli --no-optional$ hexo

初始化博客/部署
Hexo
123 $ hexo init <folder> {<folder>为你想命名的文件夹名称}$ cd <folder>$ npm install

接下来应该可以看到
_config.yml
文件,打开至文件末端并进行如下设置
1234 deploy:type: gitrepo: http://github.com/yourname/yourname.github.io.gitbranch: master这样你之后在进行
Hexo deploy
操作时即可直接上传到你的GitHub仓库
,接着就是在本地生成静态网页了
123 $ hexo generate 可简写为g$ hexo server 可简写为s$ hexo deploy 可简写为d如果报错则输入以下命令
12 $ npm install hexo-server --save$ npm install hexo-deployer-git --save接下来写一篇
Hello World
玩一玩
12 $ hexo new Hello World$ hexo s没错,新建一篇文章就是这么简单
Hexo new [article]
,并且已经可以在http://localhost:4000/
预览了,比如我写了该文章
在执行完Hexo deploy
操作后,在浏览器中输入https://yourname.github.io
或者你自己的域名,即可看到你自己的初始网站啦,在这之后每次部署只需要四部曲
1234 $ hexo clean 清除本地缓存$ hexo g 编译生成静态页面$ hexo s 在本地端口预览$ hexo d 上传到GitHub
高度定制化
插入图片
Hexo-asset-image
为我们提供了无需利用七牛云等图床,在本地即可完成图片的引用的功能
1 $ npm install https://github.com/CodeFalling/hexo-asset-image --save接下来在markdown的语法中即可设置图片的插入
12  (首页不可见){% asset_img yourpic.jpg 描述%} (首页可以看到)
增加侧边栏
|
|
|
|
利用Github Pages + Hexo 框架来搭建自己的blog,整体耗时大概在1h左右,