首页 > 技术文章 > 基于Hexo快速搭建个人博客网站

yl-space 2020-12-26 16:26 原文

网站示例:与李的个人博客

一、搭建GithubPages

1、在GitHub上创建一个名为"yourname.github.io"的仓库

如我的GitHub账户名称为hanguilin,那么我就需要创建一个名为hanguilin.github.io的仓库

2、进入仓库,进入Settings

找到GitHub Pages

第一部分是个人主页访问地址,初始化应该为http://yourname.github.io。

第二部分是表示网站根目录/与gh-pages分支进行关联。

第三部分是选择GitHub自带的主题。

第四部分是关联到自定义域名,你的自定义域名需要解析到yourname.github.io域名上。拿阿里云举例,需要进入域名控制台进行域名解析,选择CNAME方式将自定义域名解析到yourname.github.io域名。

第五部分是使用https,勾选之后,会自动为你的域名添加https支持。

我们在这里去选择一个主题:

选择之后根据提示将初始化代码进行提交。

访问http://yourname.github.io,就可以看到初始化的个人主页。

二、使用Hexo模板

个人主页搭建好之后,发现页面很简单,没办法支撑自己更多的功能展现。所以我们可以用其他技术来美化我们的页面,如hexo。

hexo

hexo官网: hexo

hexo简介:是一个基于nodejs 的静态博客网站生成器,只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。

因为hexo基于nodejs,所以使用hexo之前需要安装node环境,安装过程可以浏览器搜索,网上很多相关教程。

初始化一个hexo项目:

# 安装hexo脚手架
npm install hexo-cli -g
# 创建一个blog的项目
hexo init blog
# 进入blog文件夹
cd blog
# 下载库包
npm install
# 本地运行,默认端口4000
hexo server

替换hexo项目默认模板

如果hexo项目的默认模板(landscape)不符合你的审美,那可以在hexo主题库中挑选主题进行替换。

hexo主题库:https://hexo.io/themes/

将下载好的主题库放入blog/themes中,再打开blog目录下的_config.yml配置文件,修改其中的theme参数,值为blog/themes中你新加主题的名字。

设置github仓库

打开blog目录下的_config.yml配置文件,修改其中的deploy参数

type: git表示代码用git进行管理

repo表示仓库路径

branch表示推送的分支

hexo常用命令

  • hexo clean

    清空public文件夹

  • hexo g

    根据md文件生成对应的html

  • hexo s

    在本地运行

  • hexo d

    发布到Github Pages中

三、本地化Markdown编辑器

推荐使用Typora+PicGo+GitHub图床,具体方法请参考博客《MarkDown本地编辑神组合》

推荐阅读