Samuel Liang's Blog

artificial noob

0%

用Github pages和Hexo搭建自己的个人博客

Posted on Edited on In

简介

Github Pages是一个静态站点托管服务, 用户可以可以从Github直接获取HTML, CSS, Java Script文件, 用户可以用这些文件来发布网页。
Hexo.io是一个基于Node.js的快速、简单、功能强大的博客框架。
本门将介绍如何使用Hexo + Github Pages搭建个人博客。

准备工作

下载和安装Node.js和Git

Git连接Github

打开Git Bash

  • 设置用户名和邮箱
    git config --global user.name "你的GitHub用户名"
    git config --global user.email "你的GitHub邮箱"
  • 生成SSH密钥
    ssh-keygen -t rsa -C "你的GitHub邮箱"
  • 为Github账户添加SSH密钥
    公钥默认保存在 C:\Users\用户名\.ssh目录中, 用记事本打开 id_rsa.pub，复制内容。
    点开github页面右上角头像,在Settings->SSH and GPG keys中点击New SSH key, 随便取个标题, 将复制的公钥粘贴进去, 点击Add SSH key
  • 验证连接
    打开Git Bash, 输入
    ssh -T git@github.com
    如果显示”You’ve successfully authenticated, but…”则连接成功

创建Github Pages Repository

  • 点开github页面右上角旁边的加号，选择New repository
  • Repository name填上 用户名.github.io
  • 勾选 Add a README file
  • 点击 Create repository

安装配置Hexo

  • 找一个地方新建文件夹, 命名为hexo用来存放Hexo程序
  • 打开Git CMD 进入到hexo的文件夹(注意这里不是Git Bash, 如果用Git Bash可能会碰到奇奇怪怪的问题)
  • npm安装hexo
    npm install -g hexo-cli
  • hexo文件下载
    hexo init
  • 生成静态文件
    hexo g
  • 部署到本地服务器4000端口
    hexo s
    如果访问http://localhost:4000看到Hexo默认页面的Hello World则本地博客安装成功

部署Hexo到Github Pages

  • 安装hexo-deployer-git
    npm install hexo-deployer-git --save
  • 修改博客配置文件
    找到你的hexo文件夹里的_config.yml文件, 用记事本打开，在文件末尾找到Deployment部分，修改成：
    1
    2
    3
    4
    deploy:
     type: git
     repository: git@github.com:你的用户名/你的用户名.github.io.git
     branch: main
  • 部署
    hexo d
    打开你的博客站点用户名.github.io，如果跟本地静态一样显示Hexo的主题博客模板Hello World则部署成功

博客个性化设置

  • 主题更换
    1. 到https://hexo.io/themes/里面找一款喜欢的主题，点进去找到安装说明。
    2. 比如我们想更换为nexT主题，我们只需要在Git Bash进入到hexo文件夹, 然后执行
      git clone https://github.com/next-theme/hexo-theme-next themes/next
    3. 如果文件下载成功我们会在hexo/themes里面找到next文件夹
      我们只需要在hexo的_configu.yml文件里面Theme: 后面的landscape改成next
    4. 执行
      hexo clean
      hexo g
      hexo d
      然后我们就可以把我们的博客成nexT主题
    5. 后续的个性化设置比如增加社交联系方式，更换主题样式等等可以在theme\next_config.yml文件中修改，文件里注释写得很明白
    6. 如需要更多的优化，可以在Hexo搭建的GitHub博客之优化大全中找到
    7. 要支持latex公式，可以按照Hexo中LaTeX公式渲染中配置

发布文章

  • 在hexo目录下执行
    hexo new "name"
    该命令会在hexo\sorce_post下新建一个name.md文件,在这个md文件中写入内容
  • 执行
    hexo g
    hexo d
    则可以发布