自建免费blog(安全仓库)

本文目录
  1. 1. 安装Node.js
    1. 1.1 下载地址:
    2. 1.2 安装
    3. 1.3 (可跳过这步)验证安装是否成功
    4. 1.4 国内无法翻墙的话需要如下操作:
  2. 2. 安装Git
    1. 2.1 下载地址:
    2. 1.2 安装
    3. 1.3 (可跳过这步)验证安装是否成功
  3. 3. Github
    1. 3.1 注册帐号
    2. 3.2 建立仓库用于存放博客
    3. 3.3 发布博客首页
  4. 4. 安装Hexo
    1. 4.1 安装
    2. 4.2 初始化
  5. 5. 连接Github与本地
    1. 5.1 关联帐号
    2. 5.2 设置密钥SSH key
    3. 5.3 领取github令牌
    4. 5.4 修改博客设置
  6. 6. 发布博文
    1. 6.1 写博文
    2. 6.2 设置博文标题、tag、分类
    3. 6.3 把博文上传到博客网站
  7. 7. 个性化主题设置
    1. 7.1 下载自己喜欢的theme(主题)
    2. 7.2 安装主题
    3. 7.3 根据自己的喜好修改外观
    4. 7.4 有些修改是在根目录的设置文件进行
  8. 8. 个性化域名
    1. 8.1 挑选并购买域名
    2. 8.2 设置namecheap
    3. 8.3 设置Github
    4. 8.4 强制实施HTTPS

1. 安装Node.js

1.1 下载地址:

https://nodejs.org/zh-cn/download/

选择相应的版本:Windows,x64

1.2 安装

一路点击next,不用改动默认设置

1.3 (可跳过这步)验证安装是否成功

  • 在任意文件夹中按Win+R打开命令提示符
  • 输入(或鼠标右键复制粘贴,下同)node -v,回车
  • 再输入npm -v,回车
  • 如果出现版本号,那么就安装成功了。

1.4 国内无法翻墙的话需要如下操作:

  • 按Win+R打开命令提示符
  • 输入npm config set registry https://registry.npm.taobao.org,回车

2. 安装Git

2.1 下载地址:

https://git-scm.com/download/win

选择相应的版本:Windows,x64

1.2 安装

  • 一路点击next,不用改动默认设置
  • 最后一步要求选择添加路径,选择:
    Use Git from the Windows Command Prompt

1.3 (可跳过这步)验证安装是否成功

  • 在任意文件夹中按Win+R打开命令提示符
  • 输入git --version,回车
  • 如果出现版本号,那么就安装成功了。

3. Github

3.1 注册帐号

  • 网址:https://github.com/
  • 用自己的email进行注册(英文界面),并验证邮箱
  • 要记住自己所注册的id(以下假设id为jeantse,后文凡是输入jeantse的地方都改成你的实际id即可)

3.2 建立仓库用于存放博客

  • 点击右上角“+”号,选择New repository,也就是新建一个仓库
  • 在Repository name中填入:jeantse.github.io。注意必须填写id!不能填其他单词!id之后的.github.io也不要遗漏!
  • 勾选Initialize this repository with a README
  • 点击绿色的Create repository,就完成了建立仓库的操作

3.3 发布博客首页

  • 进入新建的仓库,点击页面中间偏右侧的Settings按钮,向下拉到最后有个GitHub Pages的按钮,点进去
  • 点击Choose a theme,随便选择一个theme并save。因为之后会修改成自己真正的theme,所以这时可以随便选。
  • 稍待片刻,回到GitHub Pages的页面就会有英文提示Your site is ready to be published at 某某网址,这就是你的博客网址了,点进去就能看到空白的博客首页。
  • 把你的博客网址保存到浏览器的收藏夹吧~

4. 安装Hexo

4.1 安装

  • 在电脑上新建一个文件夹,以后所有的博客文件都会放在这里面。
  • 文件夹必须用英文名,最好直接建立在硬盘某分区的根目录下。比如:F:\jeantse.blog,下文我都用该目录指代博客文件夹,读者请自行替换成自己实际建立的文件夹目录
  • 进入该目录,鼠标右键,选择Git Bash Here。注意是Bash不是Gui
  • 会出现一个黑色的代码输入窗口,以后所有的操作都会通过这个Git控制窗口来完成~

注意:以后所有需要打开Bash窗口的情况,都必须是在刚建立的这个博客目录F:\jeantse.blog中打开!千万不能在其他目录(或这个目录的子目录)中去打开!建议每次开机后,进入该目录,打开Bash窗口,然后就不要关闭它!一直开着对电脑没有坏处!

  • 在窗口中输入npm install hexo -cli -g,可用鼠标右键复制粘贴(但不能用键盘快捷键ctrl+c或v),回车。
  • 耐心等待代码跑完,光标恢复$就是跑完了。
  • 不放心的话就在窗口中输入hexo -v,回车,验证安装是否成功

4.2 初始化

  • 在窗口输入hexo init,回车
  • 等待软件自动生成博客网页。光标恢复$就是生成完毕
  • 在窗口输入hexo g,回车。等待代码跑完
  • 在窗口输入hexo c,回车
  • 等代码出现……localhost:4000……字样时,打开浏览器,输入网址localhost:4000,回车,就能预览到博客了!
  • 预览完毕,在窗口按下快捷键ctrl+c(也就是通常的复制键)退出预览模式,光标恢复$。

总之,任何时候需要预览博客效果,都是通过hexo g然后hexo c来执行。预览完毕记得按ctrl+c退出预览模式


5. 连接Github与本地

5.1 关联帐号

  • 打开Bash窗口
  • 输入:git config --global user.name "jeantse",记住把jeantse替换成你自己注册github的id,回车
  • 窗口没有任何反应,是对的!(有反应则是报错,检查哪里输错了,重输)
  • 再输入:git config --global user.email "jeantse@email.com",记住email替换成你注册github的email地址!回车
  • 同样是没有任何反应,才是对的。

5.2 设置密钥SSH key

请在你最常用的电脑上设置,这是将博客与电脑进行了绑定。
一旦更换电脑,就要在新电脑上追加一个新密钥(比如我就在办公室和家里的电脑分别设置了密钥)

  • 仍然是在文件夹中打开Bash窗口,输入ssh-keygen -t rsa -C "jeantse@email.com",记得替换注册邮箱,回车
  • Github,在右上角你的帐户头像下面点击settings,再点击SSH and GPG keys
  • 新建一个SSH,名字随便写,比如写workhome computer,页面上会有一个SSH输入框。
  • 在Bash窗口中输入cat ~/.ssh/id_rsa.pub,回车,会显示出一连串代码
  • 用鼠标复制显示出的代码,粘贴到网页的SSH输入框中,点击确定保存。
  • 在Bash窗口中输入ssh -T git@github.com,回车。若出现Hi jeantse! You've successfully……就是成功了!

5.3 领取github令牌

  • 登录Github 账户,从右上角的Setting进入Developer settings 再进入 Personal access tokens,找到Generate new token
  • Note 填写 Hexo 或 Blog 之类,勾选第一项 repo(亦或全部打勾),然后点击Generate token,生成令牌(也就是Token
  • 复制所生成的Token,类似ghp_sFs1x2x3x4x5x6x6x7x8x8xxxxxxx的一串字符
  • 回到Windows系统,打开设置,搜索凭据,进入凭据管理器
  • 点击Windows凭据,在普通凭据右上角添加普通凭据。在网址栏填入git:https://github.com用户名填写你的github用户名,密码栏将所复制的Token填写进去,确认即可。

5.4 修改博客设置

  • 进入电脑中的博客文件夹,文件夹根目录下有个文件名叫_config.yml。它储存了最核心的博客设置
  • txt文本编辑软件(如notepad++)打开这个设置文件,拉到最后,找到以deploy: 开头的几行
  • 将这几行修改成:
    deploy:
    type: git
    repo: git@github.com:JeanTse/jeantse.github.io.git
    branch: master

  • 别忘了其中的两处jeantse都要改成你自己的id哦~
  • 保存并关闭设置文件
  • 在Bash窗口输入npm install hexo-deployer-git,回车,等待代码跑完,光标恢复到$即可。

6. 发布博文

6.1 写博文

  • 下载并安装一个markdown编辑软件,推荐typora:https://typora.io/#windows

  • 在Bash窗口输入hexo new post "新建博文的网页英文名,假设为try",回车

  • 打开如下目录:F:\jeantse.blog\source\_posts,可以发现下面多了一个try.md文件,这就是你新写的博文的网页了

  • 双击该md文件,用markdown编辑软件(如typora)写文。写完保存关闭即可

6.2 设置博文标题、tag、分类

  • 打开try.md文件,将其编码转为UTF-8 无签名。否则输入中文就会乱码。
  • 文件最上方有一个被用短横杠隔开的区域,写着title: date: tags: categories: 等等
  • title: 之后的try改成你希望的博文标题,任何语种任何长度均可(如“第一篇测试博文”)
  • date: 是你建立这篇博文的时间,你可以将其修改为任意时间,从而改变其在博客归档中所显示的时间位置
  • tags: 是你给博文设置的标签,标签数量不限,中英文不限但不能出现空格
  • 添加标签的格式如下(注意冒号、方括号、逗号都是半角,冒号和逗号之后必须加空格):
    tags: [标签1, 标签2, 标签3]
  • categories: 是分类,分类数量不限,中英文不限但不能出现空格
  • 一篇文章可同时被分入多个类别中,某些theme主题还支持多级分类
  • 添加分类的格式如下,文章将被同时显示在类别1子类别1.1二级子类别1.1.1,以及类别2子类别2.1二级子类别2.1.1之中:
    categories: 
    - [类别1, 类别1.1 类别1.1.1]
    - [类别2, 类别2.1 类别2.1.1]

6.3 把博文上传到博客网站

  • 在Bash窗口输入hexo g,回车,耐心等代码跑完
  • 输入hexo s,回车,用浏览器预览你新写的博文,发现需要修改之处就打开md文件修改、保存,然后刷新浏览器,预览修改后的效果。
  • 博文修改完毕,按ctrl+c退出预览模式,等待光标恢复成$
  • 输入hexo d,回车。这个命令的作用是,把你电脑上的博文上传到Github的仓库中
  • 期间可能会跳出输入框,需要你输入仓库的ID+PW
  • 大约等待2分钟,打开你的博客网址,就能看到新写的博文啦!

7. 个性化主题设置

7.1 下载自己喜欢的theme(主题)

以下用我自己使用的icarus和3-hexo这两种主题为例,两个主题各有特点

7.2 安装主题

  • 在官方的主题列表或非官方的用户推荐中挑选喜欢的主题,进入其页面

官方提供的theme仓库,网友上传的自制theme质量良莠不齐,需要耐心挑选:https://hexo.io/themes/

在google搜索hexo theme,会跳出不少推荐帖、排行榜,从中挑选更有效率。但容易和其他人的网站撞衫,缺乏独特性。比如,好看但被用滥的主题:nexticarus(白色版)(我用的是icarus黑色版,相对罕见)

  • 提供theme的网站都会给出其GitHub主题仓库的链接,在仓库页面点击Clone or download按钮,下载zip压缩包
  • 将zip解压缩,对解出来的文件夹重命名,一般常用其原本的英文名,嫌原名记忆困难也可随便改成诸如try之类的都行。总之你自己能记住用过的每种主题的名字即可
  • try的主题文件夹放到F:\jeantse.blog\themes目录下
  • 回到博客根目录F:\jeantse.blog,打开_config.yml,拉到文件最下方,找到theme: landscope这一行,把landscope改成你要用的主题名字比如try,保存
  • 总之就是希望用哪个主题,就在theme: 之后填哪个名字。记住冒号之后有空格!

7.3 根据自己的喜好修改外观

  • 打开:F:\jeantse.blog\themes\try目录,通常其中也会有一个名为_config.yml的设置文件

    • 万一没有,就先回到Bash窗口hexo ghexo s命令,生成网站预览一下再退出,就会有了
  • 每个主题的设置文件内容都不同,有经验的话就查看该主题的README手册,根据手册列出的每项参数的作用,来填写参数

  • 对于中文网站,必须将该设置文件的编码转换成UTF-8 无签名再保存。否则就乱码

  • 常见的通用参数:

    博客网站地址
    网站标题
    icon
    作者头像
    作者社交网络链接
    博客首页抬头图
    是否允许多级分类
    友情链接
    ABOut介绍页面
    选择哪家的评论区提供商
    是否开启版权声明
    是否开通二维码接受读者打赏
  • 拿不准的地方,随时可以预览,根据预览效果调整参数

7.4 有些修改是在根目录的设置文件进行

  • 打开博客主目录F:\jeantse.blog中的_config.yml设置文件

  • 对于中文网站,必须将该设置文件的编码转换成UTF-8 无签名再保存。否则就乱码

  • 比较重要的几个参数:

    可将非英文语种的tag和分类,映射成英文(避免网址中出现乱码,当然不映射也OK)
    permalink,不用时间,而用title,直接根据_posts里的md文件名称生成同名网页
    per_page,规定一个页面显示几篇博文
    网站地址
    网站标题
    网站简介
    作者名字
    显示的语种
    选择哪个主题(上文已介绍过如何设置主题)
    相应的GitHub仓库地址(上文已介绍过如何修改deploy行的仓库地址)

8. 个性化域名

8.1 挑选并购买域名

  • 个人用户的非热门域名,1年只要不到50元RMB,建议一次性买10年,避免涨价
  • 千万别从国内比如百度、阿里购买,同一个域名虽然国内购买能便宜1、20元,但——国内必须备案!!!
  • 推荐 https://www.namecheap.com/ ,便宜,国内速度快

8.2 设置namecheap

  • 登录 https://www.namecheap.com/ ,从页面左上角的用户名(Your Account)进入Dashboard(用户面板)
  • 选择所购买域名的右侧MANAGE页面,点进Advanced DNS标签
  • 点击醒目的红色按钮+ ADD NEW RECORD,先后一共需要ADD三条RECORD,分别是:
    • 类型A RecordHost@Value192.30.252.153
    • 类型A RecordHost@Value192.30.252.154
    • 类型CNAME RecordHostwwwValuejeantse(这里需改成你的ID).github.io
  • 网站会自动保存你ADD的条目。万一输错了可按右侧的叉叉删除重填。
  • 填完后24H内生效,不着急就第二天再去看效果吧。

8.3 设置Github

  • 在博客目录F:\jeantse.blog\source文件夹下新建一个名为CNAME的文件,注意,不是CNAME.txt,没有文件后缀!
  • txt文本编辑软件(如notepad++)打开CNAME文件,输入自己购买的域名,保存(这个文件里就只有域名这一行文字)
  • 最后在Bash窗口输入hexo ghexo d,提交成功之后等待一段时间就能生效了

8.4 强制实施HTTPS

  • 如果没有https,则别人点进你的网页可能会被提示“网页不安全,是否仍要浏览”
  • Github能强制将域名从http://开头变成https://开头,显得高大上
  • 需要进入仓库的Settings页面(进入方法见前文3.3),勾选Enforce HTTPS即可