用hexo+github pages+独立域名搭建个人博客

发表于 更新于 分类于 热度： ℃ Valine：
本文字数： 2.6k 阅读时长 ≈ 2 分钟

摘要

用hexo建立博客这个教程，查阅了很多资料，自己倒腾了两三个小时弄好了。

现在简单记录下，以便不时之需。

基本环境

  • Window10

  • Node.js （点击进入官网下载）博主版本号为 Node.js 12.18.2 LTS

    image-20200708231743517

    在 Windows 环境下安装 Node.js 非常简单，仅须到官网下载安装文件并执行即可完成安装。

  • Git（点击进入官网下载）版本号为2.27.0

    image-20200708231819287

    GIT安装教程

安装Hexo (版本4.2.1)

  • 在任意盘新建hexo文件夹并右键，选择Bit Bash Here，如图：

    image-20200708232535741

  • 输入安装hexo命令

1
npm install -g hexo-cli
  • 接下来我们对hexo 进行初始化
1
2
3
hexo init
hexo g 或者hexo generate
hexo s 或者hexo server

这样就可以到http://localhost:4000/ 查看了

Github 设置

GitHub的优点

GitHub是基于git实现的代码托管。git可能是目前最好用的版本控制系统了，非常受欢迎。

GitHub可以免费使用，并且快速稳定。

Github上面的世界很精彩，用久了你的眼界会开阔很多。

什么是GitHub Pages？

Github Pages可以被认为是用户编写的、托管在github上的静态网页。GitHub Pages 本用于介绍托管在GitHub的项目，不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。

为什么使用GitHub Pages

可以绑定你的域名(但只能绑定一个)。

简单快捷，使用Github Pages可以为你提供一个免费的服务器，免去了自己搭建服务器和写数据库的麻烦.

相关操作

  • 注册GitHub账号

    在创建博客之前，当然必须有GitHub的帐号，该帐号将用来创建项目，默认的域名username.github.com/projectName 中的username也要用到这个帐号。（请记住username，之后会多次用到）

    注意：下面涉及到的一些命令凡是更用户名和项目名有关的一律会用这里的username和projectName代替，注意替换

    访问：https://www.github.com/ 注册你的username和邮箱，邮箱十分重要，GitHub上很多通知都是通过邮箱的。比如你的主页上传并构建成功会通过邮箱通知，更重要的是，如果构建失败的话也会在邮件中说明原因。

  • 创建项目仓库

    在创建博客之前，还需要用已有的帐号创建一个项目，上面那个链接的projectName将是这里即将创建的项目名称。

    在Git中，项目被称为仓库(Repository)，仓库顾名思义，当然可以包含代码或者非代码。将来我们的网页或者模板实际上都是保存在这个仓库中的。

    登录后，访问https://github.com/new ，创建仓库如下图：

    image-20200708235116025

    注意Repository name这里一定要填写username.github.io 这样后面才能使用Github Pages功能。

    每个帐号只能有一个仓库来存放个人主页，而且仓库的名字必须是username/username.github.io，这是特殊的命名约定。你可以通过http://username.github.io 来访问你的个人主页。

    创建了仓库后，我们就需要管理它，无论是管理本地仓库还是远程仓库都需要Git客户端；Git客户端实际上十分强大，它本身就可以offline的创建本地仓库，而本地仓库和远程仓库之间的同步也是通过Git客户端完成的。

  • 配置SSH

    上传文件需要配置ssh key，不然无法上传。
    首先先检查一下本地是否已经存在ssh key,在Git Bash输入以下指令（任意位置点击鼠标右键），检查是否已经存在了SSH keys。

    1
    ls -al ~/.ssh

    设置你的那么和email（如果你安装git时已经有了这步操作就跳过，name可以随意，但最好设置成你的github的name防止遗忘。邮箱与你的github邮箱没什么关系，但是最好写为同一个，好记住）

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

  • 生成ssh密钥

    输入以下指令（邮箱就是你注册Github时候的邮箱）后，回车：

    1
    ssh-keygen -t rsa -C “XXXXX@163.com”

    一路回车就可以了，如果设置了密码就记住。

    这一步在~/.ssh/下生成了两个文件id_rsa 和 id_rsa.pub

  • 获取key

    1
    cat ~/.ssh/id_rsa.pub

    然后拷贝key（key是以ssr（应该是这个开头的）开头 你的邮箱结尾的一长串字符。

  • 在GitHub上添加SSH密钥

    在https://github.com/settings/keys 下 add new ssh key

    image-20200708235604290

    title可随意填写，key就是我们拷贝的key

    接下来测试一下是否配置正确。

    输入一下命令：

    1
    ssh git@github.com

    成功后大概会出现一下内容：（可能会有部分不一致）

    image-20200708235845417

部署到GitHub

  • 配置_config.yml

    编辑 你所建立的hexo文件夹中_config.yml（用记事本打开）修改deployment部分。

    image-20200708235946378

    自行替换成你的GitHub的名称。注意：每个：后面必须有一个空格！！！

  • 安装Git包

    1
    npm install hexo-deployer-git --save

  • 部署到GitHub上

    1
    hexo deploy

    或者

    1
    hexo d

现在我们可以通过访问 http://username.github.io/ 来访问我们自己的博客啦,可以看到我们的博客已成功搭建，接下来就是一些主题的优化和配置呢。

如何添加一篇文章

新建一篇博文可通过以下的命令

1
hexo new

HEXO主题

我用的是Next 7，版本更新很快，插件也很多，样式很简单，折腾的东西也很多，确实非常喜欢。

具体主题的使用，后面再做记录。https://hexo.io/themes/ 这里可以下载主题。

image-20200709000545353

通过搜索框搜索自己喜欢的主题。

关于Markdown编辑器

推荐使用Typora这一款，试用了一段时间，非常符合我的预期。

加上现在Typora可以联合Picgo实现快速上传图片到图床，简直是神器。放出截图：

  • Typora截图

    image-20200709000943792

  • Picgo截图

    image-20200709001109935

  • Typora联合Picgo功能设置截图

    image-20200709001142220

关于这个markdown编辑器，出了一个教程贴，大家可以看看：

Typora+Picgo+七牛云实现图片快速上传

相关文章推荐