零基础教你Hexo+Github+CloudFlare+Typora打造互联网创作工具流

原创

快乐咸鱼每一天

修改于 2019-10-13 22:55:57

2K0

修改于 2019-10-13 22:55:57

文章被收录于专栏：从零搭建系列从零搭建系列

0x1

让你爱上码字的感觉，不需要任何技术，思想的火花就通过指尖的跃动显示出来。或分享大众，或自己雪藏。

0x2 准备材料

- 域名 `example.org` （可选）

- GitHub 账号 `cvbox`

0x3 安装工具

mac下安装homebrew，如果已经安装，跳过此步

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装node

brew install node

安装hexo

npm install -g hexo-cli  #-g表示全局安装

初始化博客,选择一个目录执行下面命令，这里用cvbox来进行演示，如无特别声明，后续都在cvbox下进行操作

hexo init cvbox
cd cvbox
npm install
hexo g
hexo s

本地测试预览

http://localhost:4000/

安装git

brew install git

更改主题(yilla)

# 这款主题简单优雅
# 在cvbox目录下执行
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

# 下载完成后，更改cvbox目录下的_config.yml中
theme: yilia

# 重新生成博客页面并进行预览，查看最终效果

hexo g
hexo s

到此，差不多在本地能看到新主题博客的预览效果了

0x4 推送站点

当然，不止步于此。我们需要在网络中找个房子给这些机灵的文字精灵，github pages 或者coding的pages都是一个不错的选择。后者对国内用户相对友好。

建立一个以github用户名为前缀的仓库（xxx.github.io），下图截图的cvbox就是托管本博客仓库的github账号，所以取名为cvbox.github.io,切记不要搞错

创建完成后，复制下图中的地址 https://github.com/cvbox/cvbox.github.io.git

生成本地公钥并添加到github，此步骤是为了能够实现无密码获取到对github仓库的操作权限，为后续的第4步骤提供基础条件

ssh-keygen -t rsa -C "邮件地址@youremail.com"

# 一路回车，执行完成后
cd
cat .ssh/id_rsa.pub

复制下面这样一坨马赛克一样的东西

# 浏览器中打开页面 https://github.com/settings/keys，并把复制的公钥贴到sshkeys栏目中

修改cvbox下_config.yml,根据具体情况，更改为自己的对应仓库链接

deploy:
  type: git 
  repo: https://github.com/cvbox/cvbox.github.io.git
  branch: master

浏览器中访问 cvbox.github.io，验证部署成功
推送博客页面到github，此步骤可选

0x5 优雅的书写

到了这里，简单的博客就搭建好了，恭喜

那么如何体验顺滑书写的感觉呢，毕竟有图文，要插入图片，图床这些概念都不懂啊，而且以后想迁移我的这些数据，图床不服务了，这些成本也不小啊。

不用担心，这里的方式，图片还是在自己的本地，不会再使用到第三方，全部跟网页一样都托管到了github

插入图片的小技巧
在source下建立assets 文件夹，用来存放文章用到的图片
设置typora的文件复制路径，Typora-偏好设置-图像-复制到指定路径-../assets

0x7 保存你的源文件

git commit

主题也进行了修改了如何保存
git submodule add xxx

0x8 添加CDN

那个，我先添加cdn 没问题 cloudflare 帮你解决

0x9 支持HTTPS

那个我还想加个小锁，https，自定义域名

0xa 支持私密浏览

文章只有自己看，加个小密码

切换到根目录
npm install hexo-blog-encrypt --save

开启加密开关,在外层的_config.yml中添加

encrypt:
    enable: true

在期望加密的文章头部添加配置

---
title: 我是文章的标题
date: 2019-10-01
tags: [life,tool]
password: 12345
abstract: 摘要
message: 土豆土豆，我是地瓜
---

password: 博客加密使用的密码
abstract: 在博客的列表页显示的摘要信息
message:  密码输入框的提示信息