前言

📰博客 —— 可能这个东西在大多数眼中已经落后于时代甚至压根没听过。在这个信息碎片化、人人信息获取不对等的时代,各个社交平台可以很快速地发送动态、短视频,方便的跟自己的朋友们点赞、互动,而花大量时间金钱和精力去维护一个没人看的博客未免显得有点蠢?

其实我觉得这个问题没有一个准确标准的答案,也是价值观的驱动,无非就是你情我愿的事情,对于个人来讲,拥有自己的域名、自己的博客、通过自己的能力创建一个独立空间,完全的自定义建设自己的博客,能够在网络留下自己的所见所得、所想所思、拥有自己的清静的一亩三分地、能够和一同坚持维护自己的博客的人一起交流、交朋友(互换友链)…… 何尝不是一个有意义的事情,总的来说,在允许的范围做任何自己觉得值得的事

准备材料

讲述一下我的博客历程

  • 第一阶段:接触 WordPress 等大型博客程序,对各种复杂的功能插件和精美的主题感觉很新鲜
  • 第二阶段:追求更加轻量简洁的 Typecho 程序,使用 MarkDown 进行创作
  • 第三阶段:希望能够脱离服务器,降低博客维护成本,更加专心于写作而不必花费大量时间在服务器维护上

接下来讲述用Github Pages + Hexo代码托管仓库的 Pages 功能托管自己的静态博客。

安装软件

上面的两个如果不懂都以默认设置安装就行,如果你需要更改安装路径可能需要自己配置环境变量,这个请自行百度

安装并搭建Hexo

  • 全局使用NPM安装Hexo,输入命令
    1
    npm install -g hexo-cli
  • 初始化Hexo
    在你以后想要存储 Hexo 本地源文件的目录打开 Git Bash,然后初始化Hexo,比如我想要在 C 盘的一个名为 hexo 的文件夹进行写作,那我在 C 盘打开 Git Bash 使用下面的命令初始化 Hexo 博客:
    1
    hexo init hexo
    这时候你在C盘打开hexo目录,就是如图所示

    这时候讲一下hexo的目录结构:
1
2
3
4
5
6
7
8
.
├── _config.yml # hexo的全局配置文件,在此配置网站的主要参数
├── package.json # npm软件包以及版本信息
├── scaffolds # 模版文件夹
├── source # 资源文件夹
| ├── _drafts # 草稿/模板文件
| └── _posts # 默认文章Markdowm文件
└── themes # 主题文件夹目录
  • 打开hexo目录安装npm
    1
    npm install
  • 启动hexo本地预览
    1
    hexo s -g

如果觉得npm安装慢的话(需要在合适的网络下才会很快),可以换阿里巴巴源,为了不影响观看效果和操作流程具体操作步骤我放在结尾处,有需要观看点击目录 换阿里巴巴源

上述操作进行完后打开浏览器,输入 http://localhost:4000 就可以预览你的博客了

推送到Github仓库

创建仓库

  • 注册并登录Github账号
  • 新建一个名为 username.github.io 的 Public 仓库,其中 username 是你的 Github 用户名,比如我的用户名是 koyang,那么我新建的仓库名称即为:koyang.github.io
  • 点击仓库的 Settings 勾选 Github Pages

    链接 Git 到远程仓库

  • 打开Git Bash,分别输入以下命令:
    1
    2
    3
    4
    git config --global user.name "username" # username是你的Github用户名,注意大小写保持一致
    git config --global user.email "your email address" # your email address填写你的Github注册用的邮箱
    ssh-keygen -t rsa -C "your email address" # 生成SSH公钥,your email address同上填

  • 在 C:\Users\用户名.ssh\ 目录下,以文本编辑器打开 id_rsa.pub 文件,复制里面的所有内容
  • 添加到Github-在 Github 点开自己头像打开- Settings-选择 SSH and GPG Keys,点击 New SSH Key,添加刚才复制的id_rsa.pub

然后再在Git Bash输入

1
ssh -T git@github.com

出现提示:(Hi 用户名!You’ve successfully authenticated,but……)就说明已经可以Git了

  • 打开 hexo 目录下的_config.yml 文件,修改最后一行的 deploy 配置信息:
    1
    2
    3
    4
    5
    deploy:
    type: git
    repo:
    github: https://github.com/username/username.github.io.git # 将username修改成你的Github用户名
    branch: master #表示部署到仓库的默认master(主)分支
  • 安装Git插件
    打开hexo目录Git Bash,输入
    1
    npm install hexo-deployer-git --save
    附上hexo命令
    1
    2
    3
    4
    $ hexo clean # 清除生成的静态文件
    $ hexo g # 生成新的博客静态文件
    $ hexo s # 启动本地预览
    $ hexo d # 推送博客静态文件到远程仓库
    执行上面命令,你发现 hexo d 后本地预览的博客已经推送到你的远程仓库了,并且浏览器地址输入 username.github.io 可以访问你的博客了,代表关联 Hexo 到 Github 成功了!

自定义域名

如果你觉得github.io域名不好看。可以选择自定义自己的域名

  • 进入自己的域名控制台,添加一条 CNAME 记录,记录值是你的博客的仓库名,比如我的:
  • 打开你博客仓库的 Settings,找到 Github Pages 栏填入你自己的域名,比如我的是:koyang.shop
  • 强制全局https,这样就可以使用Github
  • 这时候就可以输入自定义域名访问网站

主题更换

这里推荐cards主题

  • 打开Git Bash输入
    1
    2
    cd hexo
    git clone https://github.com/ChrAlpha/hexo-theme-cards.git themes/cards
  • 修改_config.yml
    1
    theme: cards
  • 重新生成
    1
    2
    3
    hexo clean
    hexo g
    hexo s/d
    各种主题的进阶配置以及详细说明请看主题作者写的文档

自定义网站信息

您可以在 hexo 的 _config.yml 中修改大部分的站点配置,Hexo 的配置文件使用 YAML 语法,请注意空格和字符缩进

参数 表头
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词,使用半角逗号 , 分隔多个关键词
author 网站作者名称
language 网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans 和 zh-CN。
timezone 网站时区,一般的,对于中国大陆地区可以使用 Asia/Shanghai

换阿里巴巴源

1.使用阿里定制的 cnpm 命令行工具代替默认的 npm,输入下面代码进行安装:

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

以后安装插件只需要使用cnpm intall即可。

2.如果习惯了npm,又不想使用cnpm怎么办呢?也不是没有办法。

输入以下命令:

1
npm config set registry https://registry.npm.taobao.org

再输入:

1
npm config list

可以看到,已经换源了:

1
2
3
4
5
6
7
8
9
10
11
12
13
$ npm config list
; cli configs
metrics-registry = "https://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/6.4.1 node/v10.15.1 linux x64"

; userconfig /home/dounine/.npmrc
registry = "https://registry.npm.taobao.org/"

; node bin location = /usr/app/node-v10.15.1/bin/node
; cwd = /usr/app/node-v10.15.1/lib/node_modules
; HOME = /home/dounine
; "npm config ls -l" to show all defaults.

结尾

  • 主题还是推荐看看作者的帮助文档,毕竟这个只有作者知道具体配置
  • 绝大多数问题你都可以通过浏览器检索和阅读 Hexo 文档或者主题文档找到解决方法。如果你在使用中遇到一些无法理解、无法解决的问题也希望你在了解提问的智慧后再进行提问,所有人的时间都很宝贵,熟读提问的智慧可以一定程度上让你少走弯路
  • 如果觉得加载的慢可以考虑使用CDN加速一下
  • 也不是主题越花里胡哨越好,插件越多越好,合适的才是最好的