使用github pages, hexo框架和Next主题搭建个人博客

发表于 更新于 分类于 ， ， ， ，

welcome to Github Pages, this is a blog service of github.

Welcome to Hexo! This is my very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask the author on GitHub.

you can find more information about Next or on the github .

所需环境：github，本地win10系统，网络。

github pages

github pages本身就是提供的一个博客服务，在github中创建一个特定格式的Repository，访问对应网址，github就会用博客的方式展示出来。

具体操作流程看官网即可。生成的博客内容在redeme.md文件中。

hexo

hexo是一个本地化的博客框架，在框架的相关文件内放入md文件，它会把本地信息展示成博客式的网页。

操作流程：

1. 安装git和node.js。

在cmd中使用node -v和git -version查看安装情况。

2. 安装hexo

cmd中输入nmp install -g hexo -cli回车安装。

3. 安装本地博客。

  • 在本地任意磁盘下创建文件夹 blog

  • 鼠标右键文件夹 blog，选择 Git Bash Here。 如果没有安装 Git，就不会有这个选项。

  • Git Bash 打开之后，所在的位置就是 blog 这个文件夹的位置(./blog/)。

  • 输入 hexo init 将 blog 文件夹初始化成一个博客文件夹。

  • 输入 npm install 安装依赖包。

  • 输入 hexo g 生成（generate）网页。 由于我们还没创建任何博客，生成的网页会展示 Hexo 里面自带了一个 Hello World 的博客。

  • 输入 hexo s 将生成的网页放在了本地服务器（server）。

  • 浏览器里输入 http://localhost:4000/ 。 就可以看到github中的成果了。

  • 回到 Git Bash，按 Ctrl+C 结束。此时再看 http://localhost:4000/ 就是无法访问了。

4.Create a new post

  • 在blog所在本地文件下，右击git bush here输入
    hexo new "My New Post"
  • 在.\blog\source_posts 路径下，会有一个My-First-Post.md的文件。 编辑这个文件，然后保存。
  • 回到 Git Bash，输入 hexo g
  • 输入 hexo s
  • 前往 http://localhost:4000/ 查看成果。
  • 回到 Git Bash，按 Ctrl+C 结束。
    More info: Writing ,Server,Generating,Deployment

5.将本地博客部署到github上。

操作如下：

  1. 获取 Github 对应的 Repository 的链接。

  • 登陆 Github，进入到 ryanluoxu.github.io

  • 点击 Clone or download

  • 复制 URL 待用

     我的是 https://github.com/caizy1709/caizy1709.github.io
  1. 修改博客的配置文件
  • 打开配置文件 /d/blog/_config.yml （使用 bash 里的 vi 或者 notepad++）
    找到 #Deployment，填入以下内容：

    deploy:
    type: git
    repository: https://github.com/caizy1709/caizy1709.github.io
    branch: main (受美国BLM运动影响，github上原来的master改成了main)

  1. 部署

  • 回到 Git Bash

  • 输入 npm install hexo-deployer-git --save 安装 hexo-deployer-git 此步骤只需要做一次。

  • 输入 hexo d

  • 得到 INFO Deploy done: git 即为部署成功

  • 之前我们创建的 ReadMe.md 会被自动覆盖掉。

  • 查看成果,前往 caizy1709.github.io 即可。

使用Next主题

you can find more information about Next or on the github .个人认为好看的有Next和butterfly.

这里以 Next 为例。 大概思路就是把整个主题的文件克隆到我们的主题文件夹中。在配置文件中注明使用该主题。

操作如下：

  1. 还是回到 Git Bash。 输入 git clone https://github.com/theme-next/hexo-theme-next
    这样，该主题的文件就全部克隆到 D:\blog\themes\next 下面。

  2. 修改博客配置文件

  • 打开 D:\blog_config.yml

  • 找到 theme:把 Hexo 默认的 lanscape 修改成 next。 即 theme: next

  • 找到 # Site，添加博客名称，作者名字等。

  • 在 language 后面填入 en 或者 zh-CN，选择英文或者中文。

  • 找到 # URL, 填入 url。比如 url: https://caizy1709.github.io

  • 填入名字,名字会出现在博客底部。

  1. 重新生成部署
  • 回到 Git Bash。输入 hexo g -d就可以了。g 把修改的内容生成网页，-d 部署。

  1. 查看成果

    前往 caizy1709.github.io 即可。

以上内容主要参考罗旭博客，更新了一点内容，重复写一遍为了锻炼markdown格式书写以及加深印象。