建站 | 简单搭建hexo博客

最新推荐文章于 2022-09-07 20:03:45 发布

arginsen

最新推荐文章于 2022-09-07 20:03:45 发布

阅读量455

点赞数

分类专栏： practice 文章标签： hexo github pages web

本文链接：https://blog.csdn.net/arginsen/article/details/89874333

版权

practice 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

可查看我的网站：https://www.arginsen.com

文章目录

前言

梯子教程很容易被封，于是传在个人网站：
https://arginsen.com/blog
有兴趣可以动手玩玩，
那么这里就对自己搭建网站作以记录，
供大家参考。
个人主页：
https://arginsen.com
https://www.arginsen.com

“以下灰字为注释，红字为命令提示”

主要目的：

写杂记
做笔记
传点自己的小玩意儿

主要思路：

搭建简单的静态Hexo博客
采用Github托管
在Hexo选喜欢的网站主题
购买域名(可选)

Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

详情见 https://hexo.io/zh-cn/docs/

教程

安装Node.js和Git

1.安装chocolatey

chocolatey是windows的软件包管理器，被设计为分散式框架，用于快速安装所需要的应用程序和工具。

逻辑：

这里我们需要用到hexo博客框架,
以及需要用git将文件上传到github仓库，
所以需要安装Node.js(hexo基于Node.js)和Git;
而在win上要安装两者需得下载安装包安装，
而chocolatey作为win上的包管理器，
则可以直接用命令行一部安装。

打开cmd输入以下命令：

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"**!

可输入 choco 检查是否安装完成：

关闭cmd

2.安装Node.js和Git

使用管理员身份打开cmd，输入：

 choco install nodejs git

chocolatey将自行下载两者 (如下图)

先下载nodejs，完成询问是否运行，回复y (如下图)

继续下载git，回复y，完成后关闭cmd (如下图)

可打开cmd查看npm与git是否正常运行，(如下图)

npm是随同node.js一起安装的包管理工具，对应管理node.js的第三方插件，后续安装hexo-cli会使用npm

输入以下命令：

 npm -v 
 git --version

第一步安装成功

安装hexo-cli

Hexo需要通过hexo-cli安装，先安装hexo-cli，

打开cmd输入：

 npm install hexo-cli -g

出现如上图，安装完毕。

创建Github仓库

此次建站采用GitHub托管我们的网站，我们需要新建一个代码仓库。

GitHub目前对免费用户开放了私密仓库，但免费用户的私密仓库不支持GitHub Pages，这里选择public

1.注册github账号

前往github.com按步骤注册账号

2.创建仓库

名字可以用 `xxxxx.github.io` ,方便后续直接生成网页

点选生成 README.md 文档，这个文档是自己编写，介绍你这个仓库项目是干嘛的，这里用来初始化仓库

3.克隆到本地编辑

下方图片因为没有更新，名字还显示原来的。如果是作为个人主页的博客，建议还是`xxxxx.github.io`这种格式，到时候github pages直接会用`https://xxxxx.github.io`作为个人网址

当然你如果想自定义主页，然后将博客作为主页下的一个分支，且在不买域名的情况下，博客的仓库名就可以自定义（如blog）,而自定义主页的仓库名命名为 `xxxxx.github.io`

这里可以使用github下的atom编译器，也可以使用功能更加强大的VS code，当然也可以选择直接在终端用vim编写文章，不过要是你会vim等操作命令，那就基本不用看我的教程了..

4.打开保存在本地的仓库（文件夹）

等下就会用到VS code进行编辑，而且VS code内自带终端，就不用外边打开cmd/poweshell/git bash了

安装Hexo

打开你刚才clone到本地的 ``xxxxx.github.io` 文件夹，这时会看到**.git**文件夹，表示git在此文件夹内工作，如果未看到就按下图设置一下

在xxxxx.github.io文件夹内创建docs文件夹

进入docs文件夹，鼠标右键打开git bash

输入：

 hexo init

可以看到start blogging with hexo,即安装完成

这时我们可以接着输入：

 hexo server

即可按提示在 http://localhost:4000 看到博客已生成，上边安装介绍hexo默认安装landscape主题，当然主题可以在hexo官网主题去自己选择

配置hexo

这时候再打开刚才的VS code，打开的是xxxxx.github.io文件夹，那么在界面的左侧栏就可以看见里边的所有内容，这时hexo文件已经全部生成完成，只需要我们自定义，以及写文章了

1.主要配置

打开docs文件夹下_config.yml文件，在右边编辑修改内容，将主题内容修改成自己的内容

这里要注意url
url即为你的主页地地址，xxxxx.github.io 仓库对应生成 https://xxxxx.github.io

root这里也默认 /
#而你若是将hexo博客作为自定义主页的一个分支，那么就需要改为：

url：https://xxxxx.github.io/blog
root: /blog/

###注意config文加里的设置冒号后必须要有一个空格

2.装主题

这里推荐next主题，安装按next讲
next也是目前依旧在不断维护更新的一个主题
你也可以自己去选择主题

链接：https://hexo.io/themes/

安装细节一般主题都会有简介

在docs文件夹下打开终端(cmd/git bash)-文件夹内打开

或者直接在vs code内打开，不过需要从仓库文件夹下进入docs，输入指令：

 cd docs

安装next主题输入：

git clone https://github.com/theme-next/hexo-theme-next themes/next

更改docs文件夹内的_config.yml文件

找到theme ，改为next

保存更改，和之前一样输入命令：

hexo server

即可预览

上图选自https://theme-next.org/ 官网

一般新安装的只能看见hello world字样

对于博客主题的配置参见：

https://github.com/theme-next/hexo-theme-next

博文发布

1.文章

打开docs/source/posts，里边的初始文章是一篇 helloworld.md , 你可以撰写自己的文章，发新文章的话直接在此文件夹下新建xxx.md，书写形式可以网上找寻_markdown文件编辑教程，也可以参考我的下篇文章：

markdown编辑器使用

2.添加CNAME,提交推送至远端仓库

如果是要绑定自己的域名，那么就在VS Code左侧找到source文件夹，右键创建名为CNAME的文件(无后缀格式)

如果没买域名也可以直接用github.io给的，不用添加CNAME

在右侧写入你的域名(如arginsen.com),保存
再打开之前的github桌面软件，可以看到左栏有很多新的文件/改动的文件，这是需要在下边输入总结记录
再commit to master，提交至master分支，这时完成了本地仓库的提交。
接着点击push origin，推送至远程仓库(新的都会显示push)

3.发布文章

返回vs code界面，

打开/docs/_config.yml,配置最下边的deploy设置

repo 后为你仓库的地址，后边接.git

在终端下/docs/路径输入：

 npm install hexo-deployer-git --save

安装 hexo-deployer-git发送工具

完成后输入：

 hexo clean
 hexo generate 
 hexo deploy

generate表示将博客已经生成html页面

deploy表示将生成的博客推送到了远程的仓库

所以此时不需要再在github desktop提交推送

而且以后修改发文章只用hexo g 与hexo d 即可

配置完成。

开启网站

打开github上你博客的仓库settings

在下边开启GitHub pages，如果有域名就在下边保存

#没域名的在这里已经完成啦！

你的网站已上线！

#有域名的同学请到域名购买商解析域名到 xxxxx.github,io

那么我这里用的是arginsen.com,就用@

![](http://img.xiumi.us/xmi/ua/1O3nK/i/463d75fbcd2e12c4772cc00e30747898-sz_3908.png)

大功告成，博客上线！

btw，以下是一个博主说的…表示很不能理解

我觉得给外行来讲，虚拟主机这个概念更不好理解

在虚拟主机架设也不好操作，如相当简易的typecho博客，号称仅几百k，但是又要配置好环境，需要在虚拟主机安装nginx/apache2+mysql+php，这些里边又分很多类，直接操作也是相当麻烦，理解每一个概念也不容易，一个配置不好就全部凉凉，而且用完一年免费的又得花钱，还是gayhub好
不过上述在服务器端架设博客，如typecho/wordpress其实也都是有环境搭建包的，就像本文的巧克力，一部部署。

总之，看个人需求吧

arginsen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
建站 | 简单搭建hexo博客

个人网站：[https://www.arginsen.com](https://www.arginsen.com)文章目录前言教程安装Node.js和Git安装hexo-cli创建Github仓库安装Hexo配置hexo博文发布开启网站前言梯子教程很容易被封，于是传在个人网站：https://arginsen.com/blog有兴趣可以动手玩玩，那么这里就对自己搭建网站作以记录，...
复制链接

扫一扫