Hexo博客搭建详细笔记(Win10+Gitee)

目录

1、为什么要搭建个人博客

2、搭建个人博客的多种选择

(1)动态博客搭建

(2)静态博客搭建

3、先简要介绍一下Hexo


Hexo工作原理

1、安装Hexo环境(也可以看Hexo官方文档来安装)

1.1 安装Node.js和Git、gitee

1.2、配置npm

1.3、安装cnpm

1.4、安装hexo

2、本地部署Hexo

2.1 创建Blog工作目录

2.2 初始化hexo

2.3 配置Hexo主题

3、远程Gitee部署Hexo

4、日常使用

4.1  基本操作

4.2 日常写作

完结!


1、为什么要搭建个人博客

        工作和学习过程中,我们经常遇到一些这样或那样的问题,此时我们可能会在网上找到相应的解决方法。

        但是过了一段时间之后,当我们再次碰到类似的问题时,早已忘记以前是怎么解决的了,于是又要到网上去搜,浪费大量的时间和精力。

        面对这些重复的问题,我们为什么不能把它们记录下来呢?

•有助于养成归纳总结的习惯,帮助记忆,把别人的知识变成自己的知识。

•通过记录自己工作和生活,锻炼自己的写作的能力。

•培养开放(开源)意识,与大家一起学习交流,共同进步。

2、搭建个人博客的多种选择

目前,主流的博客主要分静态博客和动态博客两类:

所谓动态,就是指有前端有后端,可以登录到后台进行管理。静态博客是纯前端的展示,没有后端。

(1)动态博客搭建

a. 直接在简书、CSDN(最近吐槽的比较多)、知乎、博客园等动态博客公共平台上写。

•优点:简单

•缺点:别人家的东西限制多

b. 使用WordPress等成熟框架搭建动态博客 + 服务器部署

•优点:相对简单

•缺点:笨重

c. 使用JavaPHP、Python等语言开发属于自己的动态博客 + 服务器部署

•优点:功能强大

•缺点:麻烦、不易上手

(2)静态博客搭建

a. 使用Hexo、Hugo、jekyll等主流博客框架搭建静态博客 + 托管在GitHub、码云等公共平台。

•优点:轻量级、易上手、不花钱

•缺点:访问速度慢

b. 使用Hexo、Hugo、jekyll等主流博客框架搭建静态博客 + 云端服务器部署。

•优点:有独立的域名、访问速度快、自主可控

•缺点:要花钱买域名和云服务器

(在此跟着CodeSheep学习如何搭建部署“Hexo+gitee”的个人博客,关于外观内容日后再优化,window和linux都差不多。)

3、先简要介绍一下Hexo

Hexo可以理解为是基于node.js制作的一个博客工具。它是一个静态页面生成和上传的工具。

Hexo可以在本地安装,不需要部署到我们的服务器上。

我们只需要在本地通过markdown编写文章,然后让Hexo帮我们生成静态的html页面,并通过Hexo将生成的html文件上传到我们的服务器。

用Hexo的是因为Hexo简单容易上手, 文档多, 用的人多, 别人出过的问题也多, 别人的解决方案也多!!

项目最终是部署到码云上,不需要自己再购买服务器,这里也可以部署到 github, 但是我们大天国有一堵墙, 用 github 那速度着实让人着急!



Hexo工作原理

使用Hexo搭建个人博客并自动部署到阿里云ECS服务器的原理

简单来说就是,

在本地计算机搭建Hexo环境,

Hexo通过generate命令将*.md文件渲染成静态的html页面,

然后Hexo通过deploy命令,触发git用户通过公钥免密登陆服务器,

进而将静态页面推送到服务器的git仓库(repository)中。

然后,服务器再通过钩子(git-hooks) 将静态页面checkout到网站的根目录下,进而实现博客的自动部署。



1、安装Hexo环境(也可以看Hexo官方文档来安装)

1.1 安装Node.js和Git、gitee

主要是用git bash 命令行维护项目的时候方便点,我的Git是2019年8月的版本Git-2.23.0-64-bit.exe,按提示安装即可。

Git for windows安装完成
版本查看

gitee账号gitee(码云)官网分分钟注册一个,主要是速度快, 简单(和在github上部署基本没区别),日常维护的时候, 相对比github快点。

官网界面    

用gitbash配置免密登录

git config --global user.name "lxxxxdy"  #Gitee用户名

git config --global user.email "xxx@qq.com"  #Gitee邮箱

# 生成SSH公钥并添加到码云,实现免密码登录

# 1、生成公钥,不用输入密码直接回车

ssh-keygen -t rsa

# 2、进入 C:\Users\主机名\.ssh 目录,把 id_rsa.pub 里面的信息复制到码云的 SSH公钥 中即可

gitee后台公钥添加

Node.js官网下载Windows (x64)长期支持版 Long Term Support (LTS) schedule。按提示逐步安装即可。

node.js官网

安装完成后打开cmd查看版本号验证是否安装成功。

查看node版本号
查看npm包管理工具版本号

1.2、配置npm

配置npm的全局模块的存放路径以及cache的路径:

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:D:\nodejs\node_cache"

配置npm模块路径

# 查看修改是否成功

npm root -g

# 然后把路径D:\nodejs\node_global配置到环境变量的 PATH 下即可

1.3、安装cnpm

执行命令安装之前,利用nmp安装cnpm,因为国外镜像下载巨慢,在此将镜像源指向淘宝:

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装cnpm成功图
查看版本

    1.4、安装hexo

使用cnpm 安装 Hexo,会快点。

#全局安装命令

$ cnpm install -g hexo-cli

#对于熟悉 npm 的进阶用户,可以仅局部安装 hexo 包。

$ npm install hexo

出错,platform unsupported hexo-fs@3.1.0 › chokidar@3.4.3 › fsevents@~2.1.2

问题:

platform unsupported hexo-fs@3.1.0 › chokidar@3.4.3 › fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32)

[fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32)

fsevent:作用是能够检测文件目录的修改,可以记录恶意软件的非法操作,获取恶意软件的完整路径,删除和修改日期。

查询后了解到,fsevent是mac系统的,在win或者Linux下使用会有警告,虽然提示fsevents不适合Windows,但其实忽略了也没问题的

#检测hexo是否安装

hexo -v

可能是环境变量没手动配置

解决方法:

确保自己是最新的node.js,然后选用方案

方案一:

cnpm rebuildnode-sass

#不放心可以重新安装下

cnpm install

方案二:

npm update

npm install

nodejs node_modules/node-sass/scripts/install.js

npm rebuild node-sass

方案三:忽略

cd D:\nodejs\node_global\

hexo -v

方案三,由此看出,hexo已经安装成功了,但是环境变量路径Path没配置,手动添加即可

一般只要执行方案三就够了。

找到hexo安装路径
添加到Path

到此为止需要做的前期工作都OK了, 接下来就正式创建博客项目了!

大致分为本地上的操作和部署到远程仓库的操作2部分!





2、本地部署Hexo

2.1 创建Blog工作目录

新建D:\MyHexoBlogs文件夹

新建本地文件夹

用Win+s搜索cmd,并以管理员身份打开

管理员启动cmd

进入到D:\MyHexoBlogs目录

进入路径

2.2 初始化hexo

hexo init

超时,因为国内有一睹保护我们互联网安全的墙

解决方法:(先去MyHexoBlogs文件夹下,删除所有文件)

#更换成淘宝的源

npm config set registry https://registry.npm.taobao.org

#验证是否成功

npm config get registry

#或者 

npm info express

切换成功
初始化成功

在博客目录下D:\MyHexoBlogs打开Git Bash,启动hexo,start

Hexo s

成功启动Hexo

在浏览器打开localhost:4000

打开本地hexo主页

2.3 配置Hexo主题

NexT主题: 风格简约, 用的人都说好, 有团队维护不断更新, 网上相关文章也多…

NexT主题

综上所述: 我只推荐你用Next主题, 简单粗暴, 好用省时间, 真香就完事了!

有其他主题需要的同学可以去hexo官网的theme自己找一下喜欢的主题

步骤1:

首先你得下载主题, 推荐git clonenext的官方仓库, 虽然很多人都会用旧版本, 可能是习惯了或者追求稳定吧, 不过这个主题的大改动并不多, 所以不要在意, 直接克隆最新的就OK了!

NexT主题克隆

先进入博客根目录,右键打开Git Bash

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

然后根目录下的themes目录, 就能看到next的文件夹了

Themes目录,新增了next主题

步骤2:

指定主题, 编辑根目录下的_config.yml配置文件;

用记事本打开config.yml

把theme: landscape修改成theme: next(注意,theme:这个“:”的后面一定要加一个空格然后hexo三连)

修改默认主题为next,打上你刚刚改好的“next”     

#然后再次本地运行

hexo s

#或者

hexo server

Ctrl+C暂停,再重启hexo

F5刷新Hexo网页

主题应用成功

到此为止, 主题就设置好了, 其他的一些定制化操作, 本文就不一一赘述了,

网上很多文章, 覆盖面很全, 希望大家稍微为自己的博客花一点小时间, 打造一个舒适且不失个性的写作环境…




3、远程Gitee部署Hexo

.3.1 部署目的2点:

给别人看的

自己想看, 自己需要跨设备看

部署前提, gitee配置好账号, git本地的全局变量等等…

步骤1: 建立public类型的远程仓库, 和本地的项目最好同名

创建仓库
创建成功

步骤2: 安装远程推送插件

npm install hexo-deployer-git --save

安装成功

步骤3: 修改博客根目录的配置文件_config.yml末尾

deploy:

    type: git

    repo: https://gitee.com/你的用户名/你的仓库名.git

    branch: master

我个人的配置修改,仅供参考

步骤4: 推送(如果在此过程中,设置密码或者用户名错误,请参照此文章

hexo d

首次hexo d会弹出设置

 设置成功

步骤5: 进入远程仓库MyHexoBlogs, 选择服务–>Gitee Pages

选择Gitee Pages

步骤6: 点击更新或一开始的部署, 完成部署

点击启动Gitee Pages
等待自动部署.jpg

到此为止, 部署完毕, 点击生成的链接, 就能访问你部署在Gitee上的静态博客了




4、日常使用

4.1  基本操作

这个不用说了吧, 本地运行, 前面也用了几次了 hexo server的简写

hexo s

g代表生成, 你可以理解为生成要展示的页面 hexo generate的简写

hexo g

清除之前的各种模式和操作, 将项目恢复到生成前状态

hexo clean

生成markdown文章,

hexo new

推送到远程仓库(接下来会讲) hexo deploy的简写

hexo d

以上5条指令, 基本能够应付日常的所有需求, 是不是很简单

其实更多的时候, 我们会选择复合使用指令, 日常情况基本只使用下面2个指令就OK了

清理+重新生成+本地运行

hexo clean && hexo g && hexo s 

清理+重新生成+推送到远程仓库

hexo clean && hexo g && hexo d

4.2 日常写作

 #新建文章

hexo new

#生成的文章在/source/_posts目录下 

生成新文章

自己编辑文档,一通狂写…

更名
我用VSCode工具编辑MarkDown文件

#本地先看一眼效果

hexo clean && hexo g && hexo s

本地预览效果

#写好之后,推送到远程

hexo clean && hexo g && hexo d

推送之后,登录Gitee, 进仓库, 进入Gitee Pages, 更新(注意分支,而且每次修改都要更新部署)

出现了博客网址,点击打开即可

通过链接访问, 查看最终效果

问题:部署后出现本地有渲染效果但是远程不显示CSS样式

解决方法:尝试修改根目录下_config.yml配置文件的第二个区块URL区的前两项

url: http://maverickming.gitee.io/my-hexo-blogs/

root: /my-hexo-blogs/

url和root和Gitee Pages预览url有关

hexo clean && hexo g && hexo d #重新推送

去Gitee Pages点击更新部署,并预览

更新部署之后的效果

本地效果 = 远程效果,完事儿!



搭建完结!此次学习结束!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
禁止转载,如需转载请通过简信或评论联系作者。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342