Hexo搭建静态博客

前言

前段时间因为我的WordPress博客进入后台非常慢,严重影响操作使用,再加上服务器时间的限制,所以就讲博客从WordPress迁移到了Hexo上,这篇文章记录下我创建Hexo博客的一些流程步骤。

Hexo

Hexo是一个简单地、轻量地、基于NodeJS的一个静态博客框架,可以方便的生成静态网页托管在github或者是国内的coding.net上

Github Pages

GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。因为Github的空间免费稳定, 因此可以用于将自己的静态站点托管在github上来搭建自己的个人博客站点。另外国内的coding.net也支持Pages服务,同样可以进行托管静态网页。

Github上生成的网站的默认域名一般都是username.github.io,这里的username是指你在github上注册的用户名,当然github的网站也支持自定义绑定域名。

安装Git

因为我们要将最终的静态网页文件推送到github上,所以第一步我们需要先在机器上安装Git,Git下载地址:https://git-for-windows.github.io/,安装完成之后配置好相关全局参数,如user,email等

安装NodeJS

因为Hexo是基于NodeJS的,所以还需要安装NodeJS,下载地址:http://nodejs.org/

安装Hexo

在磁盘上任意目录下右键鼠标选择Git Bash,使用如下命令进行Hexo的安装
npm install -g hexo

创建Hexo项目

初始化Hexo项目

在磁盘上新建一个文件夹作为自己Hexo项目的根目录,如:D:\Hexo,在此目录下右键鼠标选择Git Bash,然后执行如下命令进行Hexo项目的初始化
hexo init

安装Hexo项目依赖

npm install

本地查看Hexo站点

依赖安装完成之后,Hexo项目就算建好了,接下来我们使用如下命令检查项目是否成功创建:

hexo generate       //此命令表示生成静态文件
hexo server       //比命令表示启动服务,启动之后在本地可以查看站点

执行上述两个命令之后,可以在命令行上看到提示,在浏览器中访问http://localhost:4000,可以成功访问则表示你的Hexo项目创建成功了。

创建Github仓库

在github上创建一个与自己账户名一致的仓库:账号名.github.io,当然没有github账号的赶紧先去注册一个账号。

生成SSH密钥

执行如下命令生成SSH密钥

ssh-keygen -t rsa -C “你的邮箱地址”,按3个回车,密码为空

执行完成之后,在C:\Users\Administrator\.ssh下会生成两个文件id_rsaid_rsa.pub

打开id_rsa.pub,复制全文,打开https://github.com/settings/ssh,Add SSH key,粘贴复制的文本内容

这样设置之后,将静态文件从本地推送到github上时就不要输入用户名和密码了,当然也可以不设置github的ssh,这样的话在推送文件到github上时会提示你输入用户名和密码

配置Hexo项目

Hexo目录结构

Hexo项目创建成功之后,我们在项目根目录下会发现这样几个我们经常用到的目录
1. source 这个目录是用来存放我们写的博客文件
2. themes 这个目录里是所有hexo安装的主题
3. _config.yml 这个文件是Hexo项目的主配置文件

配置Hexo

使用文本编辑器打开上面介绍的_config.yml文件,按照官网https://hexo.io/docs/configuration.html上的提示配置好相关配置,具体配置细节我就不多介绍了,自己在官网上看吧

我只介绍一个配置项deploy配置,这个配置就是用来配置你的静态站点是要部署到哪个上面,一般都是用github,以我的配置为例:

deploy:
  type: git
  repo: https://github.com/huyongli/huyongli.github.io.git
  branch: master

注意配置参数与值之间是需要有一个空格的,不然配置是无法生效的,type表示我们使用的是gitrepo表示你github上的仓库地址,branch表示你仓库的分支,一般默认都是master

部署Hexo

配置完Hexo之后,就可以将Hexo站点部署到github上了,执行如下命令进行部署:

hexo generate
hexo deploy

如果在部署的过程中出现如下错误:

ERROR Deployer not found: git

执行如下命令:
npm install hexo-deployer-git --save

在创建Hexo或是部署的过程中可能会多次出现类似的错误,一般都是使用npm install hexo-deployer-XXX --save类似的命令进行插件安装

上述命令执行成功后,重新部署,部署成功后,命令行上会提示Deploy done: git

成功部署后,过个几分钟就可以在浏览器上通过你的仓库地址访问你的博客了,还是以我的为例:http://huyongli.github.io

安装Hexo主题

Hexo默认的主题很丑,如果想自己的博客看着舒服的话,需要安装另外的主题插件,我使用主题的是next

进入next主题主页https://github.com/iissnan/hexo-theme-next
将此主题代码完整下下来,然后解压放到Hexo根目录下的themes目录下,然后将hexo项目的主题配置修改为next:theme: next

至于next主题的具体配置参考该主题的详细使用介绍吧http://theme-next.iissnan.com/

到此,整个Hexo的安装部署就结束了

Hexo是一个基于Node.js的静态博客框架,可以帮助你快速搭建个人博客。在Mac上搭建Hexo个人博客的步骤如下: 1. 安装Node.js:首先确保你的Mac上已经安装了Node.js,可以在终端中输入`node -v`来检查是否已经安装。如果没有安装,可以去Node.js官网下载并安装。 2. 安装Hexo:在终端中输入以下命令来安装Hexo: ``` npm install -g hexo-cli ``` 3. 创建博客:在终端中选择一个合适的目录,然后执行以下命令来创建一个新的Hexo博客: ``` hexo init myblog cd myblog npm install ``` 4. 配置博客:在博客目录下找到 `_config.yml` 文件,使用文本编辑器打开进行配置。你可以设置博客的标题、描述、作者等信息,还可以选择主题和插件。 5. 编写文章:在终端中执行以下命令来创建一篇新文章: ``` hexo new "My First Post" ``` 这将在 `source/_posts` 目录下创建一个新的Markdown文件,你可以使用Markdown语法来编写文章内容。 6. 生成静态文件:在终端中执行以下命令来生成静态文件: ``` hexo generate ``` 生成的静态文件将会存放在 `public` 目录下。 7. 预览博客:在终端中执行以下命令来启动Hexo服务器并预览博客: ``` hexo server ``` 然后在浏览器中访问 `http://localhost:4000` 就可以看到你的博客了。 以上就是在Mac上使用Hexo搭建个人博客的基本步骤。如果你想了解更多关于Hexo的详细配置和使用方法,可以查阅Hexo官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值