Hexo搭建个人博客网站详细教程

一、准备工作

1、了解Hexo

Hexo是高效的静态站点生成框架,它基于Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容,而且相对于其他框架,Hexo在速度上也有很大优势。

2、搭建Node.js环境

我们了解到Hexo基于Node.js的,那么我们搭建博客网站首先需要安装Node.js环境。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。
下载地址:http://nodejs.cn/download
测试安装:命令行使用node -v 、mpm -v,查看显示版本号即成功。

3、安装Hexo博客框架工具

Hexo是一个建站工具,可以帮助我们快速生成基本的博客文件,安装它需要在控制台下使用如下命令:

npm install hexo-cli -g
yarn add hexo-cli -g

若报错,请尝试在命令前加上sudo

4、安装Git版本工具

Git是目前世界上最流行的分布式版本控制系统,是的,没有之一。使用Git可以帮助我们把本地的网页和文章等内容提交到Gihub上,实现同步。
下载地址:https://git-scm.com/downloads

右键单击桌面出现Git Bash Here选项则表示成功,git --version 可以查看版本号。

5、注册Github账号

gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub。这里用到Github,是因为我们需要通过Github得到自己的博客网站域名,而且需要使用gitHub同步我们个人博客的相关文件。
注册地址:https://github.com


二、开始搭建博客

1、新建GitHub仓库

搭建我们的个人博客需要一个唯一的域名,当然我们可以申请购买一个域名来使用,但是在不是太必要的情况下,我们也可以通过Github Pages获得一个免费使用的域名,这需要我们在Github上新建一个仓库,如下:

这个过程和建立普通的仓库没什么区别,关键在于新仓库的名字,一定要是UserName+“github.io”的形式。这也是之前强调的要起一个好的用户名的原因。这样之后我们最后的博客网站的链接就会是:https://UserName.github.io的形式。

2、创建本地博客站点

使用Hexo在本地先创建一个本地博客站点:

hexo init  myHexoBlog  //myHexoBlog是项目名

创建完成之后,进入目录先安装依赖包:

npm install

下面来测试本地博客站点,在本地博客根目录下使用控制台命令:

hexo g  //g是generetor的缩写,生成博客
hexo s  //s是server的缩写,启动服务

此时打开浏览器,输入 http://localhost:4000/, 我们将会看到Hexo自带默认主题显示的博客样式如下:

3、同步Github,允许公共访问

在本地我们已经搭建了博客,但是还只能自己本地访问。若要别人也能看到,那就需要我们将其同步部署到GitHub上了。还记得我们之前准备的Github仓库吗,这里就要用到了。
首先找到我们的博客仓库,并拷贝仓库地址:

然后修改本地博客目录的配置:
修改本次博客根目录下的_config.yml文件,修改deploy下的配置如下:

安装上传GitHub的插件:

npm install hexo-deployer-git —save //安装部署插件

把代码推送到github:

hexo d //部署到github

最后我们开启GitHubPages:

就可以通过:https://自己的用户名.github.io/ 去访问了


三、Hexo的基本操作

1、Hexo常用命令:

hexo clean // 清理
hexo new "文章名称" // 新建文章
hexo g // 生成public文件夹
hexo s // 开启本地服务器
hexo d // 推送到github仓库

2、Hexo更换主题:

在Hexo主题页面找到自己喜欢的主题,链接地址:https://hexo.io/themes/

进入到主题仓库复制地址:

在项目控制台执行如下命令:

在 _config.yml 文件下修改主题为刚下载的主题:

重新启动项目就能看到主题改变了:

如果小伙伴们在搭建过程中遇到问题,可以通过QQ联系我哦!!

点击这里联系我😍😍


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Hexo搭建个人博客网站详细教程

文章字数:1.3k

本文作者:Spicy boy

发布时间:2020-02-20, 22:51:08

最后更新:2021-03-31, 10:10:34

原始链接:http://www.spicyboy.cn/2020/02/20/Hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99%E8%AF%A6%E7%BB%86%E6%B5%81%E7%A8%8B/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏