Hexo框架搭建个人博客

搭建Hexo博客，无论是MacOS，还是Windows，大体步骤与操作命令实际相差不多，此文主导win7系统的Hexo个人博客搭建：

Windows：

sandyzikun
初始化博客
> hexo init 文件夹名称
新建文章
> hexo new 文章名称
(或者)
> hexo n 文章名称
在线预览
> hexo server
(或者)
> hexo s
一键部署
> hexo deploy
(或者)
> hexo d
======================================
顶我上去！！！
https://sandyzikun.github.io/ 欢迎访问！

2019-05-17 13:00

MacOS：

我是小州啊
[调皮]学习笔记！2020年2月5日13点13分
---    #安装Nodejs
node -v    #查看node版本
npm -v    #查看npm版本
npm install -g cnpm --registry=http://registry.npm.taobao.org    #安装淘宝的cnpm 管理器
cnpm -v    #查看cnpm版本
cnpm install -g hexo-cli    #安装hexo框架
hexo -v    #查看hexo版本
mkdir blog    #创建blog目录
cd blog     #进入blog目录
sudo hexo init     #生成博客 初始化博客
hexo s    #启动本地博客服务
http://localhost:4000/    #本地访问地址
hexo n "我的第一篇文章" #创建新的文章 
#返回blog目录
hexo clean #清理
hexo g #生成
#Github创建一个新的仓库 YourGithubName.github.io
cnpm install --save hexo-deployer-git #在blog目录下安装git部署插件
----
#配置_config.yml 
-----
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
          type: git
         repo: https://github.com/YourGithubName/YourGithubName.github.io.git
          branch: master
-----
hexo d    #部署到Github仓库里
https://YourGithubName.github.io/  #访问这个地址可以查看博客

 git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia  #下载yilia主题到本地

#修改hexo根目录下的 _config.yml 文件 ： theme: yilia

hexo c    #清理一下
hexo g    #生成
hexo d    #部署到远程Github仓库
https://YourGithubName.github.io/  #查看博客

2020-02-05 13:13

安装准备工作：

1.下载Node.js进行安装：

(1) 那首先呢，我登录了nodejs的官方网址 https://nodejs.org/en/ ，下载了以自己电脑匹配的64位系统的，nodejs的windows最新版本14.15.3LTS(长期支持版)：

 然而在安装过程中并不顺利，系统提示并不支持此版本，是啊，都2021年了，谁还用win7系统，虽然微软放弃了，但我依然钟爱，好不容易搞到了一台依然支持win7系统的笔记本，那么我就搜索了win7如何安装nodejs，感谢! win7安装 nodejs，npm [乔海权_杭州] 文章：

 1. 下载地址：http://nodejs.org/dist/v9.7.1/

 2. 安装：建议安装到非系统盘(比如这里安装到D盘)，全部默认配置，不停地下一步安装即可。

 3. 查看是否安装成功，命令行查询 node  -v

 4. 默认已经安装了npm (nodejs包管理器)，直接查询版本

 5. 配置npm的全局模块的存放路径以及cache的路径，在NodeJS的主目录下，建立"node_global"及"node_cache"两个文件夹。

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Program Files\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：

 6. 修改路径

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

7. 修改环境变量，在原来的环境变量上添加

 增加环境变量 NODE_PATH

 根据以上操作安装node和npm成功，然后通过命令：

cnpm install -g hexo-cli

安装hexo成功后，但在执行 hexo -v 查看hexo版本信息时，却报类似 ERR_CONSOLE_WRITABLE_STREAM 这样的错误，经搜索引擎查询如下解释(！感谢)：

 安装Hexo后，运行指令一直出现，ERR_CONSOLE_WRITABLE_STREAM，搜索wei'guo

以前是正常的，好久没打开，现在输入任何指令都显示这样。编程小白，请求各位路过的大佬帮助，指点，万分感谢！

console.js:39
throw new ERR_CONSOLE_WRITABLE_STREAM('stdout');
^

TypeError [ERR_CONSOLE_WRITABLE_STREAM]: Console expects a writable stream instance for stdout

 

qq_41956749
NWUzmed
2020/07/31 12:00
  • node.js
  • git
  • bash
  • 点赞
  • 收藏
  • 回答
    私信

4个回复

  根据以上解答：访问网站下载版本v12.18.3：

 那么，如何重装nodejs呢，小心驶得万年船，为了不踩坑，我又去上网查到如下文章 

1. 安装node.js重装与卸载[太阳下山就不等了]：

官网选取之前版本4.4.7.msi

默认下载

1、卸载node.js

2、删除C:\Users\Administrator\AppData\Roaming下边的npm、npm-cache

3、重新安装node.js，再次在dos中输入node -v和npm -v可以看到相应的版本号

（之前出了很多问题，也试了用cnpm，亲测最小白最快）

 2. 重新安装npm和node[脱壳WaGua](此方案仅供参考，我感觉第一种方案更为靠谱)：

  1. 通过 npm profix 找到npm位置，删除npm文件夹和npm-cache(要以管理员身份删除)
  2. 找到nodejs文件位置，删除里面文件，然后下载node.js,直接安装。
  3. 安装好的node.js, 自带npm . 自带的npm不是最新的。

 重新安装了nodejs以后，我查看了相关的环境变量发现：

用户变量的path：D:\Program Files\nodejs\node_global;C:\Users\fhy\AppData\Roaming\npm

说明：这里的用户环境变量的Path：C:\Users\fhy\AppData\Roaming\npm，也忘记了是自己配的，还是软件自动生成的，终归到这里是可以正常使用了，就不纠结细节了。

系统变量的Path：D:\Program Files\nodejs\;

系统变量的NODE_PATH：D:\Program Files\nodejs\node_global\node_modules

 

到此，nodejs的安装就圆满成功，因为 hexo是需要nodejs来支持的，时通过nodejs来生成的，所以接下来，就可以真正的来安装hexo博客框架了，那在安装之前，我们需要借助npm这个包管理器来安装，但是我们国内由于这个镜像源的速度很慢，所以我们一般是在使用之前，先利用npm来安装一个cnmp，这个淘宝的镜像源

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

安装的过程可能需要等待几分钟，把镜像元指向淘宝的源，在国内就比较快嘛！当然此步骤并非必须，只用npm也时完全可以行的！cnpm安装完毕，可以直接敲命令cnmp就可以看到其下的文件目录(我的win7不支持此命令)，再通过cnpm -v命令，查看下cnpm的版本信息，

 接下来就可以通过cnpm去真正的安装hexo博客框架，全局安装命令：

cnpm install -g hexo-cli

 然后通过hexo -v命令，查看hexo的版本信息，验证是否安装成功，版本信息中会显示hexo是基于node的，

 那第一步安装nodejs，第二步安装hexo，第三步就开始使用hexo来正式搭建博客了。

首先在某一个盘符下，建立一个空目录Blog，用于放置博客的相关文件，一会所有博客的东西全是在这个blog目录里面生成，所以如果在博客搭建过程中出现了什么错误，直接把这个Blog目录干掉重来即可。接下来，我们在命令行窗口进入到这个blog目录之下：

  • 1、打开命令行，定位到你想要放置本地博客的目录。如 E:\Blog
 
  • 2、接下来，就可以使用hexo来生成我们的博客了，通过命令sudo hexo init #生成博客 初始化博客，MacOS系统中sudo是表示用管理员的命令来执行，在win7直接敲命令 hexo init即可，这是就会自动cloning博客内容，它自己还会默认的去克隆一个Next的主题，安装完成后，它会提示Start blogging with Hexo！这样Hexo的博客就安装完成，然后可以通过dir命令，查看下目录下生成了哪些东西：

 

 这就是hexo为我们博客生成的基础的框架内容，后续做博客全是基于此来做的，这样安装就完成了，现在就来启动博客hexo start，start简写为s即可，这时它就会在本地localhost的4000端口来启动，然后在浏览器访问http://localhost:4000/即可，就会发现我们的博客已经有了，而且它默认创建了一篇文章，标题为Hello World，其内容还简介了hexo怎么使用，那关于这个hexo s(erver/start)，通常在写博客时被用来做预览使用此命令。下面再来新建一篇自己博客：

hexo n "我的第一篇文章" #创建新的文章 
#返回blog目录
hexo clean #清理
hexo g #生成

 

  我们可以通过其他的文本编辑器来打开，并通过Markdown语法来编辑这篇博客 我的第一篇博客文章：

  建立好新的博客文章，之后需要退后到Blog目录，然后通过hexo clean命令清理下博客，

  然后在通过hexo g命令，生成博客，这是就会发生成的博客包含了刚刚新建的名为我的第一篇博客文章的博客html格式，并把它归类到2019/02/19/这个目录之下：

  最后通过hexo s命令，重新启动，在浏览器即可访问到我们的博客。一切都这么简单，一切都这么优雅。。

 要把博客部署到远端的github上，前提要先安装git，首先下载GIT进行安装，最好不要安装在系统盘C盘里，以免产生不必要的错误。

到Git官网下载(服务器在国外，下载速度较慢)，网站地址：https://git-scm.com/downloads，如下图：

  然后，一直点击next，直到出现install，点击install，安装完成后点击finish：

检查git是否安装OK，键盘Ctrl+r，然后在弹出框中出入cmd，弹出如下界面，输入git，回车，出现git的相关命令提示信息，说明安装成功啦！！！

此时打开系统环境变量的Path：可以发现其中默认添加了 D:\Program Files\Git\cmd：

 那接下来的任务，就是要把我们的博客部署到github上，然后利用github的地址访问我们的博客，那么如何将我们自己的博客部署到github上公开使用呢？

首先登录自己的github账号，在github上新建一个仓库，仓库名必须为YourGithubName.github.io，用户部署的个人博客的github仓库的命名必须符合这个特定的要求，也不知道具体的底层实现原因，就安找这个规则照做即可，后续我们在浏览器直接输出YourGithubName.github.io，Description描述：我的hexo博客(随意)，这个地址就可以访问我们的博客了

 这样就在github 创建好了一个空的仓库，然后我们接下来回到hexo命令行窗口，定位到blog目录下，我们需要在创建好的blog目录下安装一个关于git部署的插件工具，安装方式敲命令如下：

cnpm install --save hexo-deployer-git #在blog目录下安装git部署插件

 #配置_config.yml 直接在最底部的添加如下，repo为复制自己github仓库地址，branch不写默认为master；

-----
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
          type: git
         repo: https://github.com/YourGithubName/YourGithubName.github.io.git
          branch: master
-----

 然后，通过hexo d命令部署到远端github仓库，d指的是deploy

hexo d    #部署到Github仓库里

这是可能会发现推送失败，提示信息中会出现类似下面的提示：

git config --global user.name "username"

git config --global user.email "username@email.com"

说明我们的安装git时没有进行远端的环境配置，

环境配置

  1. git安装好去GitHub上注册一个账号，注册好后，点击桌面上的Git Bash快捷图标，我们要用账号进行环境配置啦啦
  2. # 配置用户名
git config --global user.name "username"    //（ "username"是自己的账户名，）
# 配置邮箱
git config --global user.email "username@email.com"     //("username@email.com"注册账号时用的邮箱)
  3. 以上命令执行结束后，可用 git config --global --list 命令查看配置是否OK

 此时，再去执行hexo d命令，就不会报错了，然后命令执行过程中，会让我们输入github的账号和密码，输入成功后就会发现，在我们所创建的github仓库中就已经推送了如下内容：

 这时，我们访问https://waterfan-bigbay.github.io/ ，就发现我们的博客已经成功部署到github上了。

如果感觉这个主题风格不太喜欢，也可以更换为自己喜欢的主题风格，主题的来源可以通过网上自行搜索hexo-theme，或者看看别人博客是什么主题。 比如我们要更换成下面这个主题：https://github.com/litten/hexo-theme-yilia，如何为hexo换主题：首先打开blog目录，

这题特别提示：我们的博客一直是基于我们自己新建的blog这个目录来做的，所以后续在这个blog里面做的任何东西，如果出现了问题，或者不想用了，都可以直接把这个blog目录直接干掉，重新再创建一个新的目录即可。

第一步：通过clone方式下载主题 git clone theme-site.git themes/yilia，表示通过git方式克隆theme-site这个网址的git主题，到themes这个目录下的yilia子目录中，themes在blog目录中：

 git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia  #下载yilia主题到本地

 第二步：修改blog目录下的_config.yml文件

#修改hexo根目录下的 _config.yml 文件 ： theme: yilia

最后，再重新clean一下，generate生成一下，，然后重新server预览一下，就可以发现博客的主题已经改变，预览没有问题，然后Ctrl+c退出，重新执行hexo d命令，将其推送到远端github上，通过github的地址重新访问即可：
hexo c    #清理一下
hexo g    #生成
hexo s    #预览
hexo d    #部署到远程Github仓库
https://YourGithubName.github.io/  #查看博客

 这里还需要特别注意的是，！感谢 部署Hexo踩过的坑—hexo更换主题-[不秃头的小可爱] 如下：

hexo默认主题是landscape，因为太普通了，想换一个，好不容易解决git clone速度慢的问题，屁颠屁颠的配置好_config.yml，打开网页一看，给我出了这么个玩意

extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug

 网页什么样式，文字都没有，果然是神烦的hexo，不多逼逼，说一下解决办法

1、在hexo目录下打开git bash，输入命令：

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

 

 

 重新清除缓存hexo clean，生成静态文件hexo g，查看效果 hexo s即可！

那么，在利用hexo搭建博客的过程中，出现了这样一个问题，如何能利用hexo s命令部署在windows本地，然后外网通过本机的IP地址和端口号进行访问到呢？

经过试验，在同一个局域网段下的多台设备是可有进行访问的(比如windows服务器和手机连接到同一个wifi路由时，手机是可以通过浏览器直接访问到windows服务器部署的网页)。但是如果非此网段下的其他设备并无法访问。经网上搜索原因是windows没有开放防火墙或者相关端口导致的。解决方案如下：

首先查看相关端口是否开放！ 感谢 Windows 查看端口是否已打开-[shenhaiwen]

转自 https://blog.csdn.net/shenhaiwen/article/details/74252685

这篇很有效，从服务器上查看，和从客户端上查看端口是否开放，

最后检查服务器上安全狗是否打开端口，windows是否开放端口，云服务器商（三五互联、阿里云）是否开放端口（他们有硬件防火墙）

 

在默认状态下，Windows会打开很多“服务端口”，如果你想查看本机打开了哪些端口、有哪些电脑正在与本机连接，可以使用以下两种方法。

1.利用netstat命令

Windows提供了netstat命令，能够显示当前的 TCP/IP 网络连接情况，注意：只有安装了TCP/IP协议，才能使用netstat命令。 
操作方法：单击“开始→程序→附件→命令提示符”，进入DOS窗口，输入命令 netstat -na 回车，于是就会显示本机连接情况及打开的端口，如图1。其中Local Address代表本机IP地址和打开的端口号(图中本机打开了8080端口)，Foreign Address是远程计算机IP地址和端口号，State表明当前TCP的连接状态，图中LISTENING是监听状态，表明本机正在打开8080端口监听，等待远程电脑的连接。

侦听端口： 
C:\Documents and Settings\administrator>netstat -na

  

2. telnet 命令

测试端口是否开放： 
C:\Documents and Settings\administrator>telnet 127.0.0.1 8383

 如上图所示，8383端口没有开放。 

再测试8080端口：

C:\Documents and Settings\administrator>telnet 127.0.0.1 8080

 

 如上图所示，8080端口是开放的。

说明：通过telnet命令进入黑窗口后，等待一两分钟就会自动退出来。

打开端口方法

1.win7下打开端口 
win7防火墙例外设置方法 
控制面板(右上角选择查看方式为大图标)—防火墙—高级设置—高级设置—出站规则—最右边 新建规则“新建出站规则向导”，在向导的第一步，选择要创建的防火墙规则类型，选择第二个“端口”。

win7防火墙添加端口方法 
Win7的防火墙做了比较大升级 设置已经分为入站和出站。下面以开通Tomcat的远程访问8080作为例子。控制面板\所有控制面板项\Windows 防火墙 进入

入站规则设置 
第一步 选择 入站规则 然后 新建规则，选择 端口，然后下一步 
第二步 选择TCP 选择特定端口 然后输入端口，如有多个端口需要用逗号隔开了 例如:88,8080 
第三步，选择允许连接 
第四步 选择应用规则的范围 
第五步 输入规则名称

出站规则设置 
第一步 选择 入站规则 然后 新建规则，选择 端口，然后下一步 
第二步 选择TCP 选择特定端口 然后输入端口，如有多个端口需要用逗号隔开了 例如:88,8080 
第三步，选择允许连接 
第四步 选择应用规则的范围 
第五步 输入规则名称

至此，防火墙规则设置完毕，启用即可！ 
另外win7的 IIS7，只需启用 入站规则：BranchCache 内容检索(HTTP-In) 
出站规则： BranchCache 内容检索(HTTP-Out) 即可。

 具体细节！感谢 windows如何开放端口-[`FTF]

首先，打开电脑的控制面板，然后在控制面板中找到防火墙；

高级安全设置中，我们点击选择左边的入站规则；

 在右侧栏选择点击新建规则；

 规则类型选择端口类型；

选择tcp协议，特定端口，端口自己规定，比如4444；

 操作策略选择允许连接；

何时应用规则，默认全选；

 端口名称和描述，自拟；

退出之后，我们就看到创建的入站规则，该端口允许。

在命令提示符中输入netstat -na 为了查看所有端口 

按照这篇网站的步骤，并没有配置出站规则，配置好入站规则后，经netstat -na命令查询，此端口并没有被开启，难道是没有重新windows的原因？

但经过了多次试验，其实没有找出具体原因，只能在偶然一次它起作用了，然后你重新开启端口，又无法生效。神烦。。。

千言万语，就一句话，不要拿windows当服务器，不然可能会陷入一个接着一个，永远无法填完的坑。。。万恶的windows只是非专业人士的娱乐系统而已。

 踩坑： 在通过telnet命令测试端口开放情况时，如果发生提示telnet不是内部或外部命令，参考如下文章：！感谢 CMD窗口中提示telnet不是内部或外部命令-[喏喏啦]

CMD窗口中 提示 telnet 不是内部或外部命令

有时候当我们运行cmd窗口时，会提示一些正确的指令，如 ipconfig，ping ，telnet等常用命令，是无效命令，或者不是内部或外部命令。
如下图所示：

 1、首先遇到这种情况，退出cmd窗口，然后以 管理员身份 重新运行cmd窗口，看一下是否可以正确执行命令。

2、如果不行，则要看下环境变量中system32是否存在path路径下
计算机–>属性–>高级系统设置–> 环境变量 –>系统变量 中确保Path 路径中包含system32这个配置
如下图所示：

 如果不存在，则添加到Path路径下，在重启cmd窗口就行了。

如果是一般的 ipconfig，ping……这些命令，到这里就可以了， 注意 以管理员身份运行cmd窗口。
3、telnet命令，如果还是不能识别，则还需判断telnet服务器或者客户端是否开启
telnet IP 端口号 命令是检测该IP下的某个端口是否可用的一个命令
打开控制面板–>程序–> 程序和功能 –> 打开或关闭Windows功能

 找到Telnet 服务器 和 Telnet 客户端–>点击勾选–>确定

 等待功能更改完成–>重启cmd窗口，重复执行之前的命令

如果端口 可用，则直接是一个黑屏，如果不可用则会提示连接失败

 

 注意：先以管理员身份运行 cmd窗口，很多时候突然不能提示无效命令，这样都能正常执行

 

 

 

 

 写在最后：

关于hexo博客框架引用NexT主题生成的静态网页，是基于nodejs和npm通过pug前端模板引擎生成的html页面，这个前端模板引擎折腾了我好几天时间，在网上搜寻了很多文章，才有一点点明白其是干什么用的，因为hexo是不能直接部署html页面的，在这踩了一个大大的坑，作为一个java后端工程师，对h5和js等前端语言略懂皮毛，还要再学个前端模板引擎！！真是醉了！！！这是不可能的！！！因此我打算抛弃hexo博客框架，依然使用html版的butterfly主题自建博客。我可真是何苦呢！是我玩博客还是博客玩我！

由于篇幅原因，关于pug的一些了解，另开辟了新的一篇文章：

一、如何部署环境

二、初始化博客

三、写博客

四、部署博客到远端公服

五、更换博客主题

 

参考资源：

1.https://ask.csdn.net/questions/1092767

2.https://www.bilibili.com/video/BV1Yb411a7ty

3.https://www.runoob.com/w3cnote/windows-finds-port-usage.html

 

Windows下如何查看某个端口被谁占用

开发时经常遇到端口被占用的情况，这个时候我们就需要找出被占用端口的程序，然后结束它，本文为大家介绍如何查找被占用的端口。

1、打开命令窗口(以管理员身份运行)

开始—->运行—->cmd，或者是 window+R 组合键，调出命令窗口。

2、查找所有运行的端口

输入命令：netstat -ano

该命令列出所有端口的使用情况。

在列表中我们观察被占用的端口，比如是 1224，首先找到它。

3、查看被占用端口对应的 PID

输入命令：netstat -aon|findstr "8081"

回车执行该命令，最后一位数字就是 PID, 这里是 9088。

4、查看指定 PID 的进程

继续输入命令：tasklist|findstr "9088"

回车执行该命令。

查看是哪个进程或者程序占用了 8081 端口，结果是：node.exe。

 

结束进程

强制（/F参数）杀死 pid 为 9088 的所有进程包括子进程（/T参数）：taskkill /T /F /PID 9088

或者是我们打开任务管理器，切换到进程选项卡，在PID一列查看9088对应的进程是谁，如果看不到PID这一列,如下图：

  之后我们就可以结束掉这个进程，这样我们就可以释放该端口来使用了。

 

posted @ 2021-01-02 23:52  HarryVan  阅读(620)  评论(0)  编辑  收藏  举报