使用Hexo搭建个人博客
最近闲着没有事情做,就想起来很久之前的想法—自己搭一个简单的个人博客,然后经过选择(其实就是菜),用hexo作为一个个人博客的框架,以及使用Github page 来进行托管个人博客
这就是我的个人博客,可以进去瞧一瞧看一看 : 传送门
我使用的的是butterfly
的主题,本来一开始是用next
主题的,后来随便逛了一下,就被这个主题吸引住了,而且这个主题安装文档也特别详细,下面我就说下我搭建的过程吧(面向windows)
hexo的简单搭建和部署到github
1.什么是Hexo?
Hexo 是一个基于Node.js
快速、简洁且高效的博客框架。可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页,并生成静态网页托管在Github page上。
2.搭建步骤
- 下载
git
:
windows
:到git官网上下载,下载完后会有一个Git Bash的命令行工具(用来使用git)。安装完可以在命令行窗口输入git --version
查看版本
- 下载
node.js
—毕竟是用node.js编写的
windows
:Node.js官网,选择LTS就可以。安装完可以在命令行窗口输入node -v
和npm -v
查看版本
- 连接github,创建SSH密匙,并且在github添加SSH密匙
之前写的git基础教程的链接本地仓库和远程仓库的方法
- 验证连接
打开 Git Bash,输入
ssh -T git@github.com
出现 “Are you sure……”,输入yes
- 创建一个github仓库
仓库名字一定要输入
用户名.github.io
这样才能识别,不然可能出错,并且勾选 “Initialize this repository with a README”
- 安装
hexo
选择一个合适的位置,创建一个文件夹例如blog,鼠标右键然后点开git bash
,输入:
npm install -g hexo-cil
- 进行初始化
hexo
和安装组件:
hexo init blog
cd blog
npm install
- 然后使用
hexo g
进行生成静态网页,hexo server
进行预览:
浏览器访问 http://localhost:4000
如果出现页面加载不出来,可能是端口被占用了。Ctrl+C 关闭服务器,运行 hexo server -p 5000 更改端口号后重试。
这样Hex的本地博客安装成功就安装完了,下面我介绍一下初始化后生成的文件:
- source:存放文章
- themes:存放主题
- scaffolds:生成文章的一些模板
- node_modules: 依赖包
- public:存放生成的页面
- _config.yml: 博客的配置文件
- hexo 部署到Github page
- 安装部署命令:
npm install hexo-deployer-git --save
- 修改站点配置文件_config.yml,修改如下:
deploy:
type: git
repository:git@github.com:用户名/用户名.github.io.git
branch: master - 完成后再git bash 允许 git deploy就可以把网站部署到GitHub Pages,你就可以使用
http://用户名.github.io
来看我们的个人博客了。
- 安装部署命令:
3.绑定个人域名
如果感觉github的子域名不好看,那么你就可以去绑定自己的域名替换 GitHub 域名。我使用的是 阿里云 买的域名。
你如果购买域名后,就可以再域名控制台中,看到你购买的域名,然后点击解析
参考文章链接:https://blog.csdn.net/heimu24/article/details/81159099
hexo配置–根目录下的_config.yml文件
参考资料 : hexo 官方配置文档
其中一些我认为要理解的词语:
description
:主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议包含网站的关键词。permalink
:文章的永久链接格式 (有三个参数,默认就好)在permalink
到theme
之间的配置默认就好,你如果感兴趣也可以对照着官方配置文档进行一定的修改theme
:主题可以在hexo官网查找,下载放在theme文件夹下,再修改这个参数就可以改变主题了
Front-matter(是文件最上方以 — 分隔的区域,用于指定个别文件的变量)
参考资料 :hexo 官方front-matter参数文档
布局(layout)
hexo有三种默认布局:post、page 和 draft,它们分别对应不同的路径,而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。
-
使用post(默认)
hexo new [layout] (title)
你可以在_posts文件夹上看到你产生的文件 -
使用page(另起一页)
hexo new page tag
系统会自动在source文件夹下创建一个tags文件夹,以及tag文件夹中的index.md,这样你访问的tag对应的链接就是http://xxx.xxx/tag -
使用draft(草稿,想写文章,又不希望被看到)
hexo new draft newpage
系统会自动在source/_draft中新建一个newpage.md文件,如果想要预览一下,那么可以使用命令,然后再本地端口中开启服务预览:
hexo server --draft
如果想要发表到post去,输入:
hexo publish draft newpage
更换主题
hexo主题网站 : 😄 https://hexo.io/themes/ 😄
我使用的是butterfly主题,这是他的安装文档:hexo-theme-butterfly安裝文檔,如果你也喜欢这个主题的话,你可以直接跟着安装文档进行布局就可以了,非常详细的。不过如果你使用的是别的主题的话,你就可以查阅该主题的安装文档,边阅读边进行配置。hexo的主题的基础配置基本上都差不多的,如果有遇到什么有问题的可以使用百度或者google等浏览器,也可以告诉我一声,可能我还意识到这个问题。最后,我们要始终相信办法总会比困难多的😄,一起加油!!!
###附加一些参考资料