我要系列|如何用Hexo + Github搭建个人站点?

Hexo大法好

Hexo ,是个好东西。如果你也想和我一样搭建这样一个站点,选择它绝对没错。我曾经和你一样,在周一的时候点开Hexo 的官网,感觉太复杂了,但是周五的时候我已经利用它建起了这个站点,并逢人必夸Hexo 大法好!

前期准备

Hexo基本操作

假设你已经学会并把网站搭建起来了,你会有多爽?看看我吧。

  • 任何时候,想写字了,打开macbook 吧,通过 Alfred 快捷键 alt+space 调起 Terminal
  • 进入Hexo 站点的文件夹,创造一个新文章:hexo new "这里是文章的标题"
  • 接下来要编辑了,我习惯在 Terminal 里面用 vi ~/sources/_posts/这里是文章的标题.md,就可以直接进入 Vim 编辑页面了;
  • 接下来就可以用 Markdown 进行编辑了;
  • 编辑好后,通过命令:wq 退出 Vim,回到文件夹 ;
  • 清楚缓存,Hexo clean
  • 生成静态页面,Hexo generate
  • 上传博客内容,Hexo deploy,这两步也可以合并成Hexo d -g
  • 有个问题,如果没有网络怎么办?本地也可以预览,Hexo server ,之后登录http://localhost/4000 即可本地查看
1
2
3
4
5
6
7
hexo new "postName" # 新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy # 将静态博客页面部署到GitHub
hexo help # 查看帮助
hexo version # 查看Hexo的版本

环境准备

安装 Node

安装 Git

图床

考虑到博客的速度,同时也为了便于博客的迁移,图床是必须的。我只推荐 七牛云,访问速度极快,支持日志、防盗链和水印,谁用谁知道。

免费用户有每月10 GB 流量+总空间 10 GB + PUT / DELETE 10 万次请求 + GET 100 万次请求,这对个人博客来说足够,不够的话点这个活动页面,也可通过邀请好友获得奖励。

有一点要说明的是,七牛没有目录的概念,但是文件名可以包含/,比如2013/11/27/reading/photos-0.jpg,参考这里关于key-value存储系统。

足够优雅的操作就是在本地生成一个文件夹,利用代码自动更新,我用的就是这个。

申请域名

这年头,没个自己的专属域名,可以说「不是人」。

GitHub Pages 默认为每个用户分配了一个二级域名「your_user_name.github.com」「your_user_name.github.io
如果你对上述域名不满意,可以到狗爹上申请一个自己的域名,然后绑定到 GitHub Pages。绑定方法很简单,在 repo 根目录下建立一个 CNAME 文件,里面写上域名即可。

GoDaddy

买域名首选狗爹,国内的服务商大家都懂的。
目前.info域名只要¥18.99,但据说续费比较贵,我是先玩下,一年后再换,至于搜索引擎重新索引之类的,无所谓。.me和.com域名稍微贵点,大约¥60-100,网上有很多优惠码可用,可惜有的优惠码有限制。比如有个.com域名优惠码只要$1.99,但只能用国外信用卡购买。更多优惠码可以自行谷歌或到独特优惠码找。不着急的同学可以将中意的域名加入购物车先不付款,过几天,狗爹就会发优惠信息给你。狗爹不定期也会有活动,可以多关注。
付款后,需要稍微等一会你才会拿到域名,特别是支付宝付款的,要等大约半小时左右。此外域名要一年年的买,这样比较划算。

DNSPod

GoDaddy 的 NameServers 有时会被墙,因此墙裂推荐国内的 DNSPod 解析域名,免费服务真心不错。支持微信/邮件提醒,监控与报警,访问统计,健康诊断,搜索引擎推送,速度哇哇的,对于我来说足够。
两步设置就可以搞定,怎么操作参考 Godaddy注册商域名修改DNS地址

个性化设置

修改页面宽度

现在一般都用宽屏显示器,博客页面两侧留白太多,调整一下宽度。
打开\themes\next\source\css\_common\components\post\post-expand.styl 文件,找到

1
@media (max-width: 767px)

改为

1
@media (max-width: 1080px)

打开\themes\next\source\css\ _variables\base.styl 文件,找到

1
2
3
$main-desktop                   = 960px
$main-desktop-large = 1200px
$content-desktop = 700px

修改$main-desktop$content-desktop 的数值,如下:

1
2
3
$main-desktop                   = 1080px
$main-desktop-large = 1200px
$content-desktop = 810px

Next.Mist主题的文章宽度至此改完了。如果你用的是Next.Pisces,还需要继续修改。
打开\themes\next\source\css\_schemes\Pisces\_layout.styl 文件,将第4行的width改为1080px,修改后如下:

1
2
3
4
.header {
position: relative;
margin: 0 auto;
width: 1080px;

修改字体大小

打开\themes\next\source\css\ _variables\base.styl 文件,将$font-size-base 改成16px

1
$font-size-base           = 16px
------ EOF ------
David Fnck wechat

⬇⬇~ 挖 矿 打 赏 系 统 ~⬇⬇

启动线程数当前算力(Hashs/秒)您已贡献(Hash单位:个)

点击 Coin Hive 挖矿教程 学习如何配置博客打赏!

欢迎留下您的评论