折叠何宝莹

Hexo + GitHub Page建个人网站完整攻略(技术小白专用)

###买域名
Godaddy或者万网,需要备案的请考虑后者,喜欢说话碰种边界的请考虑前者,我都买过,都不错,看需要。一般不考虑国内生意的话跟Godaddy买,针对国内市场的果断万网购买域名。注册然后付费这个不教了。

解析域名
DNS解析选择DNSPod,这样整个网站访问就ok了,具体参考Godaddy注册商域名修改DNS地址。
Q:我不懂为啥要解析,感觉登陆速度差不多呀,好像快了一丢丢,那丢会不会是心理作用。应该有别的好处,我暂时不细究。

注册github账号
程序员的时光机器,你值得拥有。

在github上创建一个和账号同名的repo
创建一个repo,名称格式为yourname.github.io.比如我的Github账号是hebaoying,所以这个repo的名称就是hebaoying.github.io.这个repo属于user repo,需要审核,创建完以后,直接做下一步吧。

配置和使用github
检查本地开发环境是否安装了git和npm
输入以下指令检查是否安装。
git –version
npm –version
如果还没安装,请参考这篇文章进行安装。

安装hexo
继续在terminal输入指令
npm install hexo -g
npm install hexo-cli -g

创建本地工作目录
做到这里你的repo应该已经审核通过了。把你github的repo克隆下来。还记得你的repo地址吗?
我的repo地址是htttps://github.com/hebaoying/hebaoying.github.io
你的则是htttps://github.com/yourname/yourname.github.io(记住yourname就是你的github用户名)
输入指令拷贝repo到本地:
cd ~/Public
git clone https://github.com/hebaoying/hebaoying.github.io

初始化你的本地站点
hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git –save
hexo generate
hexo server
现在可以在本地看到你的网站了。在浏览器输入localhost:4000

部署到github上
在terminal输入 atom . (没有安装atom的参考这篇文章先进行开发环境设置再做下去)
在左侧面板选择_config.yml文件,拉到底下找到deploy部分,修改为:
deploy:
type: git
repo: https://github.com/yourname/yourname.github.io
(记得yourname是你github的用户名)

接好本地的桥,最后在terminal输入
hexo deploy
你做的网站上传上去了,所有人都可以看到了。网站就是yourname.github.io

学习用markdown写文章
打印cheatsheet出来,看他几天用MD语句写几篇文章自然就懂了
https://help.github.com/articles/about-writing-and-formatting-on-github/

为atom安装几个有用的package

  • platformio-ide-terminal 可以在atom 界面调出terminal
  • markdown-scroll-sync
  • linter-markdown
  • markdown-writer
  • markdown-toc
  • markdown-pdf
  • markdown-preview
  • ever-notedown让印象笔记和atom,还有github博客的文章同步,还在研究中

给atom戴上眼镜
对了,安装package时候我还遇到过需要翻墙,老外给的方案是打开 文件,填入以下内容:

Godaddy域名转址到github page
分别在本地hexo文件搭建和在Godaddy域名管理页面搭建。
本地文件夹yourname.github.io打开source文件夹,新建名为CNAME文件,内容为Godaddy购买的域名地址,我的是hebaoying.com.也可以完全在terminal完成:
cd ~/Public/hebaoying.github.io/souce/
echo hebaoying.com > CNAME
git add CNAME
git commit -m “CNAME file or domain”
cd ~/Public/hebaoying.github.io/
cd hexo clean
hexo deploy

Godaddy设置DNS解析:
删除所有类型为A的记录。
添加两条记录。

  1. 类型为”A (Host)” ,”主机” 为 @ , “指向” = 192.30.252.153
  2. 类型为”A (Host)” ,”主机” 为 @ , “指向” = 192.30.252.154

写文章
本地文章保存在_posts文件夹里,新建md文件,开始写就好了。

建立404页面
自定义404页面仅对绑定顶级域名的项目才起作用。 推荐使用腾讯公益404.http://www.qq.com/404/
使用方法,在source文件夹新建自己的 404.html 或者 404.md文件,输入代码

1
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://yoursite.com/yourPage.html" homePageName="回到我的主页"></script>

其中yoursite.com/yourpage.html和文字“回到我的主页”可以自定义,记得改为自己的页面和合适的文字。

改主题
我用的是next主题。
在终端窗口下,定位到 Hexo 站点目录下。使用 Git checkout 代码:

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-them-next themes/next
做主题那个人有很详尽的教程,而且在github上有问必答,当然问问题前先自己找答案。99%情况下都能找到答案。设置语言、侧栏、头像啥啥的都在主题设置里面有。

何宝莹 wechat
扫一扫关注我的公众号