震惊!白嫖!使用Github/Gitee搭建基于Hexo的静态网站服务!

Posted DanteIoVeYou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了震惊!白嫖!使用Github/Gitee搭建基于Hexo的静态网站服务!相关的知识,希望对你有一定的参考价值。

摘要

今有人想搭建个人博客,苦于没钱买VPS。

那就去白嫖。

Hexo的特点

  1. Hexo能够提供快速、简洁且高效的博客框架。
  2. Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  3. Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  4. 只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
  5. 强大的 API 带来无限的可能,与数种模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)轻易集成。

实战演示(基于ubuntu 20.04)

注:windows操作系统下的搭建与linux环境类似,请预先下载Git,然后进入Git Bash 即可使用linux命令进行操作,完全一样!

第一步,下载并安装node.js

node.js官网为

nodejs.org

下载完后找到对应压缩包的目录,解压node-v14.17.5-linux-x64.tar.xz,执行:

tar -xf node-v14.17.5-linux-x64.tar.xz

解压成功后,进入node-v14.17.5-linux-x64文件夹

cd node-v14.17.5-linux-x64

进入bin目录,里面会又 npm 和 node 两个文件

接下来设置环境变量:

ln -s /home/claisen/Downloads/node-v14.17.5-linux-x64/bin/npm /usr/local/bin/
ln -s /home/claisen/Downloads/node-v14.17.5-linux-x64/bin/node /usr/local/bin/

检查是否设置成功,成功后会显示版本号:

node -v
npm -v

第二步,安装hexo

执行以下命令安装hexo客户端:

npm install -g hexo-cli 

设置环境变量:

ln -s /home/claisen/Downloads/node-v14.17.5-linux-x64/lib/node_modules/hexo-cli/bin/hexo /usr/local/bin

查看版本号,安装成功:

hexo -v

第三步,初始化hexo

在自己喜欢的路径下创建一个文件夹用来存放博客文件:

mkdir blog

进入:

cd blog

初始化hexo:

hexo init

我们可以本地测试一下:

hexo s

再浏览器中输入http://localhost:4000

太棒了,我的朋友,你的第一篇博客生成了!

第四步,写一篇自己的博客

hexo写博客完全支持markdown语法,十分友好!

使用hexo n “ ”新建一篇博客:

hexo n "My First Blog: Why I Dicide to Program?"

切换到blog下的source/_posts目录:

cd source/_posts/

我们发现,刚刚创建的My First Blog: Why I Dicide to Program?.md就已经乖乖地躺在里面了:

稍微编辑一下:

回到blog目录下:

cd ../..

清理缓存:

hexo clean

生成博客

hexo g

本地查看一下:

hexo s

Well Done!我们的新博客成功部署了!

第五步,将博客挂到Gitee上

注意,如果你没有下载Git,请先下载Git,然后在blog目录下初始化仓库

git init

考虑到Github国内连接的不稳定,我们选择了Gitee码云(Github步骤完全一致)

重要!
重要!
重要!
我们先在Gitee上创建一个新的仓库,仓库名字一定(否则无法直接输入这个域名找到/会有一些奇怪的CSS格式问题)叫你的用户名.gitee.io

在blog目录下安装部署至gitee的插件:

npm install --save hexo-deployer-git

我们对blog下的_config.yml 文件进行配置:

vim _config.yml 

滑到文件最后:

修改Deployment

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://gitee.com/imdanteking/imdanteking.gitee.io.git
  branch: master

请注意:冒号后面打一个空格!
type后面填git!
repo后面填你Gitee仓库的网址!HTTPS和SSH都行,已经配置了SSH的之后就不需要输密码了!

branch后面填master分支

设置好上述文件后,执行

hexo d

输入你的Gitee账号密码
开始推送

去Gitee开启一下Pages服务(这边需要身份证认证)

第六步

Let us cheer up!

参考文献

B站
[重制版]hexo+gitee搭建一个blog(博客)
手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

以上是关于震惊!白嫖!使用Github/Gitee搭建基于Hexo的静态网站服务!的主要内容,如果未能解决你的问题,请参考以下文章

基于CentOS使用宝塔+Nginx搭建个人小H站

全网最全!小白搭建hexo+Github/Gitee/Coding

docsify+github/gitee搭建个人在线文档

docsify+github/gitee搭建个人在线文档

在GitHub/Gitee上,搭建一个简单的所见即所得博客

Git学习Git+GitHub+GitEE+IDEA集成+Git服务器搭建