您的当前位置:首页正文

手把手教用 Hexo + Github pages搭建属于自己的博客

2024-11-10 来源:个人技术集锦
前言

对于每一个自己写过博客的同学来说,拥有自己的个人博客站点是一件很让人值得兴奋的事情,接下来就让我们一起来利用“Hexo + Github pages“搭建属于自己的个人博客吧……^^


效果图

先放一张搭建完成后的效果图给大家瞧瞧。
感兴趣的同学也可以前往溜达溜达。


准备

1、安装Node.js()

因为 Hexo 是一个基于nodejs 的静态博客网站生成器,所以安装node.js是必不可少的。

2、安装git()

既然是基于Github pages搭建的Blog,安装Git肯定是必须的,安装好以后,直接通过指令即可将Hexo部署到 GitHub Pages。
如果有装Xcode的同学,此步可省略,因为Xcode自带有Git。


开始安装Hexo

竟然 Node.js 和 Git 都已经安装好了,那么我们就可以开始安装Hexo了。

1、在本地建立一个文件夹,用户存放Hexo的配置文件,例如:Blog。

2、然后打开 终端(Terminal) 定位到 Blog 文件夹。

3、正式开始安装 hexo

执行命令:sudo npm install -g hexo

输入密码

4、初始化 Hexo

执行命令:hexo init

5、生成静态页面

执行命令:hexo generate

6、启动本地服务

执行命令:hexo server

浏览器输入


关联Github

1、New repository

Repository name 固定写法为:

your_user_name.github.io

把 your_user_name 替换为你的用户名然后点击 Create repository 就可以了。

PS:因为我已经新建过了,所有会报错。

2、准备 Clone repository

在本地新建一个文件夹Backup,然后把Blog中的文件和文件夹都剪切到Backup中去,让Blog为空。

PS:这一步操作是为了Clone repository时不报错。

3、开始 Clone repository

clone到Blog文件夹中:

3、开始关联

把Backup中的文件和文件夹都剪切到Blog中去,然后就可以把Backup给delete了。

打开文件夹中的 _config.yml 文件:

翻到最后面:

修改deploy:

deploy:
  type: git
  repo: 填写你的repository clone地址
  branch: master

保存并退出

push 一下 git

打开终端定位到Blog

执行 install 命令:

npm install hexo-deployer-git --save

执行部署命令:

hexo deploy

回到 Github 点击 Settings:

在浏览器打开这个链接:

看到下面这个界面,恭喜你,你的个人博客已经搭建成功了:

PS:每次部署都需要依次执行命令:

hexo clean
hexo generate
hexo deploy

修改主题

既然是个人博客站点,当然要选一套符合自己气质的主题[]咯~

这里以我的为例:

- A white theme based on Landscape plus and Writing. -

安装:

git clone https://github.com/henryhuang/oishi.git themes/oishi

安装完成以后你会发现在你本地的 themes 文件夹中多了一个 oishi 文件夹

启用

修改设置文件 _config.yml,把 theme 的值设置为 oshi

这里可以修改一下 title 和 author 信息,改成你喜欢的就好了。

修改好以后重新部署(前面有写)一下,然后push一下git,就可以在你的个人博客站点上面看到符合你气质的主题效果了~


显示全文