前言

博客经过几代更迭，现在确定下来，不再更改了，静心学习，好好写博客才是正道。

此博客由 Hexo 框架搭建，使用 Butterfly 主题，托管于 Github 和 Vercel ，又拍云提供CDN加速和对象存储服务。

安装Hexo框架

Hexo 是一个快速、简洁且高效的博客框架。

安装 Hexo 相当简单，只需要先安装下列应用程序即可：

这两个必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

1
$ npm install -g hexo-cli

安装 Hexo 完成后，新建一个文件夹用于存放博客相关文件。执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
$ hexo init <folder>

完成后执行以下命令，生成静态页面，访问 localhost:4000 可进行预览。

1
$ hexo s

1-hexo

使用Bufferfly主题

在Heox官网的主题页面选择一个满意的主题。我选择了Butterfly主题，然后根据文档说明直接配置主题即可。

安装主题

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

应用主题，修改站点配置文件_config.yml，把主题选择改为butterfly

1
theme: butterfly

安装相关插件

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

在一定修改后通过以下命令来查看应用主题后的效果

1
2
3
hexo clean  #清理缓存文件
hexo g  #生成静态页面
hexo s  #重启本地服务器

访问 localhost:4000 ，可以看到更新后的主题页面。

1-bufferfly

更多的主题美化操作，可以参考主题文档来配置。

部署到Github

  1. 新建仓库，将仓库名设置为 username.github.io (username对应github用户名)

    接下来使用git把本地的博客文件上传到github仓库。如果第一次使用git的话，需要绑定用户名和邮箱。

    1
    2
    git config --global user.name "your username"
    git config --global user.email "your email"

    将上述的“your username”换成github用户名,”your email”换成注册github的邮箱地址。

    然后，生成公钥

    1
    ssh-keygen -t rsa

    在C盘/用户/用户名/.ssh目录下找到id_rsa.pub文件,用文本编辑工具打开，并复制所有文本内容。

    在Github页面右上角，点击用户头像-Settings-SSH and GPG keys-New SSH key

    把复制的公钥文本内容粘贴到Key中，上方的Title可随意填写

    添加完成后执行命令：

    1
    ssh -T git@github.com

    如果配置成功，可以看到成功的回复。

  2. 在上传之前，需要在配置文件_config.yml中添加仓库信息

    1
    2
    3
    4
    deploy:
      type: git
      repo: #你的仓库地址,如:https://github.com/wawyw/wawyw.github.io.git
      branch: master

  3. 直接通过hexo部署到github，需要安装以下插件

    1
    npm install hexo-deployer-git --save

  4. 安装成功后，执行以下命令

    1
    hexo d

  5. 刷新github对应的repository页面，即可看到提交的博客文件。

  6. 接下来配置静态站点。

点击Settings, 进入GitHub Pages配置，由于之前新建仓库的时候，仓库名为username.github.io，github已经自己为我们发布了静态的页面。如果不是username.github.io的格式，则需要手动配置。

之后访问username.github.io可在线看到博客站点。

更换域名只要把个人域名解析到username.github.io。

部署到Vercel

为什么还要部署到vercel？一是为了提高访问速度，毕竟有时候访问vercel上的资源比github好点。二是在文章推送到github仓库后，vercel会同步部署更新。

  1. 使用github账号登陆到vercel
  2. 在vercel的Overview菜单下，点击按钮 New Project
  3. 在Import Git Repository选项下，选择含博客文件的那个仓库，Import
  4. 继续，点击Deploy按钮，vercel就开始构建了
  5. 构建完之后，可以在Overview菜单下，看到新建的项目,至此项目已经创建完成，可以通过vercel自动配置的域名访问了

设置自定义域名：

  • 点击Settings->Domains，并在输入框中填入想设置的域名，点击Add按钮
  • 到域名控制台添加对应的解析记录
  • 添加完之后，变成如图的样子则解析正确

1-vercel

接下来就可以通过我们设置的域名访问我们的博客网站了！

后面需要更新网站，只需要往github上提交新的commit，vercel就会自动重新构建了！

使用又拍云CDN

又拍云提供免费的CDN和云存储服务，只需提交申请即可获得。

如何申请见：https://www.upyun.com/league

我的设置如下：

到CDN服务管理处，创建服务，如下设置

1-upyun

添加CNAME记录

若Ping域名，后缀显示为 aicdn.com，则证明CNAME配置生效，加速服务已启用。

使用CDN后访问速度对比：