搭建个人博客(Hexo+Next+Github)

在经过多个教程摸索和尝试后,发现手把手有时候挺坑人的,毕竟经验还是要自己攒,不然没踩的坑迟早要踩到,最终我的个人博客林深时见璐搭建完成,这篇教程会从本地博客建立到实现美观的网络博客进行记录分享,这篇博客也就会随着本博客的每一次升级完善而补充,希望能给想自建博客的朋友们提供帮助。

最初的诞生

我采用的搭建博客的方式是使用 GitHub Pages + Hexo 的方式,这个应该是我摸索之后认为的对新手最友好也最优质的方式,只需要投入时间学习和运营,就能拥有美观的个人博客。以下的1 - 3小点是博客的雏形构建[1]

注册Github账号

要使用 GitHub Pages,首先你要注册一个GitHub账号。

GitHub注册页

安装必备软件

  1. 安装Git客户端

  2. 安装Node.js

搭建博客

  1. 新建博客
    配置GitHub,步骤如下:

    • 登录GitHub后新建项目(new repository),项目名由两部分组成即GitHub账号名和固定后缀.github.io,比如我的项目就是linwhitehat.github.io,填写完点击创建项目(create repository)。

    • 配置GitHub SSH密钥,本地打开git bash,输入ssh-keygen -t rsa -C "your's emaill address" ,其中your’s email address换成GitHub账号的邮箱地址,第一次点击回车键(Enter)会显示存储位置,第二次点击回车键会显示输入密钥,按照要求输入密钥两次(输入过程是看不到密钥的),之后在第一次显示的存储位置打开文件id_rsa.pub,复制文件内所有内容,在GitHub中点击头像可看的setting选项,在setting选项中可看到SSH and GPG keys选项,点击new SSH,然后输入title(方便密钥管理的名字),将刚才复制的内容粘贴到key中。

    • 创建本地仓库,在本地选择不包含中文的文件路径,新建一个文件夹,进入文件夹并点击右键选择git bash,输入以下命令进行设置:

      1
      2
      3
      git init
      git config --global user.name "Your's name"
      git config --global user.email "Your's email address"

      其中Your's nameYour's email address替换为GitHub账户名和对应邮箱地址。

    • 安装Hexo,按照之前方式进入git bash终端,输入node检测Node.js是否安装成功,若出现>则表示正常,退出node模式,输入以下命令安装Hexo:

      1
      2
      npm install -g hexo-cli
      hexo version

      看到输出版本号等信息表示安装Hexo成功,在当前新建的文件夹下新建一个hexo文件夹,在hexo文件夹中进入git bash,输入以下命令配置hexo,完成之后,在浏览器输入http://localhost:4000,正常则可看到初始化的博客,到此便完成本地博客的建立。

      1
      2
      3
      4
      hexo init
      npm install
      hexo g
      hexo s
    • 配置Hexo到GitHub,在hexo文件夹下存在一个配置文件_config.yml,打开后可看到文件最后部分为:

      1
      2
      deploy:
      type:

    将其修改为以下内容,其中yourname为GitHub账号名:

    1
    2
    3
    4
    deploy:  
    type: git
    repository: http://github.com/yourname/yourname.github.io.git
    branch: master

    保存后,在当前文件夹打开git bash并输入:

    1
    2
    hexo g
    hexo d

    若出现错误显示ERROR Deployer not found: git,则输入以下命令:

    1
    2
    3
    npm install hexo-deployer-git --save
    hexo g
    hexo d

    若弹出填写GitHub账号用户名和密码则正常填写,完成之后在浏览器输入https://yourname.github.io,yourname替换为GitHub账户名,即可通过互联网访问博客。

    • 如果不想自己新建,可以使用现有的他人博客项目进行改建,见第2小节
  2. 使用已有的博客模板

    • 注册完成后搜索 linwhitehat.github.io 进入我的仓库

    GitHub项目

    点击右上角的 Fork 将我的仓库拉倒你的账号下

    稍等一下,点击刷新,你会看到Fork了成功的页面

    Fork项目

    • 修改仓库名

    点击settings进入设置

    项目设置修改

    修改仓库名为 你的Github账号名.github.io,然后 Rename

    修改项目名

    这时你在在浏览器中输入 你的Github账号名.github.io 例如:linwhitehat.github.io

    你将会看到如下界面

    博客首页

    说明已经成功一半了😀当然,还需要修改博客的配置才能变成你的博客。

    若是出现

    访问出错

    则需要 检查一下你的仓库名是否正确

修改博客配置

来到你的仓库,找到_config.yml文件,这是网站的全局配置文件。

博客配置文件

点击修改

修改配置文件

然后编辑_config.yml的内容

配置文件内容修改

接下来我们来详细说说以下配置文件的内容:

基础设置说明

1
2
3
4
5
6
7
8
9
# Site settings
title: Your Blog #你博客的标题
SEOTitle: 你的博客 | Your Blog #显示在浏览器上搜索的时候显示的标题
header-img: img/post-bg-rwd.jpg #显示在首页的背景图片
email: You@gmail.com
description: "You Blog" #网站介绍
keyword: "L1n, L1n Blog" #关键词
url: "https://linwhitehat.github.io" # 这个就是填写你的博客地址
baseurl: "" # 这个我们不用填写

至此,一个初具形态的博客便生成了。

进阶

  1. 本文中新建仓库建立博客的方式,在本地建立仓库后,又再新建一个hexo文件,且将hexo配置托管到GitHub之后,GitHub项目便被hexo文件夹下的.deploy_git覆盖,之后修改博客维护项目只需要在hexo文件夹下的git bash进行hexo处理即可。
  2. 本文博客搭建的目录结构如下,相关博客搭建及优化教程中涉及的路径参照此目录树:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    # 博客根目录
    |-- hexo
    | |-- _config.yml
    | |-- node_modules
    | |-- public
    | |-- scaffolds
    | |-- source
    | `-- themes

    # 主题根目录
    |-- themes
    `-- next
    |-- LICENSE.md
    |-- README.md
    |-- _config.yml
    |-- docs
    |-- languages
    |-- layout
    |-- scripts
    `-- source
  3. Hexo卸载方式,在git bash执行以下命令:
    1
    2
    npm uninstall hexo-cli -g
    npm uninstall hexo -g
    博客相应的文件目录需要手动删除。

结束

博客搭建基本完成,但是博客中有很多地方可以自定义设计,这也是自建博客的初衷,熟悉Hexo和Next.Mist的配置后,会逐步优化博客样式。

如果这篇文章帮助到了你,不如赞赏一下吧~

-------------    本文到此结束  感谢您的阅读    -------------
点击刷新