电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
零基础使用hexo搭建butterfly主题的博客
分 享
扫描二维码分享
零基础使用hexo搭建butterfly主题的博客
hexo
博客
网站
果果小师弟
关注
发布时间: 2021-09-03
丨
阅读: 2118
**摘要**:最近把博客网站整理了一下,换了一个简洁干净的主题。很多小伙伴问我个人博客怎么搭的,个人网站怎么搭的?你用的**Hexo**框架还是**WordPress**框架啊?如果我要搭建网站怎么选择啊?域名咋搞的啊?搭建网站是不是需要买一个服务器啊?是不是还要去公安局备案啊?等等问题,今天就一并解答。顺带再带大家梳理一下个人博客网站的搭建过程和问题。 ![](https://img-blog.csdnimg.cn/e40c35ca2eb74131b94551a6b3e7c3a7.jpg) 大家都知道搞技术的都会有一个自己的博客网站,听起来好难、好高大上,其实真的很简单,不需要你掌握什么JAVA、JS、HTML、CSS就可以很快的搭建出来。因为现在的个人博客网站用的都是开源的框架,博客的主题也是开源的。你只需要把这个框架和主题安装到你的电脑就可以了。可以说**只要你会安装软你就可以搭建一个网站**。 为了更好的理解搭建的过程,就以我的的个人博客网站搭建为例,从头到尾再搭建一遍。另外我的个人博客**配置文件也会上传至Gitee仓库**,可以直接`clone`下来直接替换,就能搭建跟我一样效果的`UI`,怎么样,给力吧!最终的效果如下,我觉的这样挺简洁明了的,当然下载下来也可以修改成你喜欢的UI。 ![liuyao-blog.cn](https://img-blog.csdnimg.cn/e40c35ca2eb74131b94551a6b3e7c3a7.jpg) ![关于我](https://img-blog.csdnimg.cn/094ec7881aa54cfab744c514be922c08.png) ![导航页](https://img-blog.csdnimg.cn/2f0bc5fad26f44cf9215e045e2402b76.png) # 1、什么是Hexo? Hexo是一个快速、简洁且高效的博客框架。Hexo使用`Markdown`解析文章,在几秒内,即可利用靓丽的主题生成**静态**网页。简单点说Hexo就是一个博客的框架,就好比你要盖一栋房子,首先就要把架构和框架搭出来,再此基础上再进行装修,装修好了就可以入住了。搭建博客也是一样,你要先安装这个框架(Hexo)到你的电脑,然后在安装主题(装修),等安装好了就可以访问啦。 与Hexo对应的就是WordPress框架,你可以这样理解Hexo是一个静态站点,WordPress是一个动态站点。使用Wordpress搞个人博客必须要有虚拟主机或者云服务器才可以。国内的虚拟主机或云服务器,新用户首年一般在200元左右,续费的话会非常贵。而利用GitHub pages服务搭建Hexo博客免费。 现在明白了吧,如果你不想花钱想白嫖就用hexo框架。如果你不差钱,想把你的个人博客搞得专业一点你就用WordPress框架,买个云虚拟主机就可以了。 ![Hexo官方文档](https://img-blog.csdnimg.cn/a1c07ab742ba4991a24690a85ff8dd5c.png) ![wordpress官网](https://img-blog.csdnimg.cn/8e702093f7574dab87f4038e1b673601.png) # 2、两者搭建流程对比 这里我做了一张思维导图,大家可以一目了然的看出这两个框架搭建网站的流程和区别。 ![Hexo](https://img-blog.csdnimg.cn/949e15aef2d3496192365521af604727.png) ![WordPress](https://img-blog.csdnimg.cn/84e5162d226142bea3b585661c522ba8.png) 从图中也可以看到WordPress搭建肯定比Hexo搭建简单,但是需要购买云虚拟主机,就是我们博客存放的空间。而Hexo搭建的过程相对要复杂一下,需要使用各种命令来安装各种依赖和插件。 # 3、开始hexo搭建 在搭建的开始首先要安装git工具和Node.js(Node.js 版本需不低于 10.13)。 ## 3.1安装Git ```c Windows:下载并安装git. Mac:使用Homebrew, MacPorts 或者下载安装程序。 Linux (Ubuntu, Debian):sudo apt-get install git-core Linux (Fedora, Red Hat, CentOS):sudo yum install git-core ``` ## 3.2安装Node.js Node.js为大多数平台提供了官方的安装程序。对于中国大陆地区用户,可以前往淘宝Node.js镜像下载。其它的安装方法: ```c Windows:通过 nvs(推荐)或者 nvm 安装。 Mac:使用 Homebrew 或 MacPorts 安装。 Linux(DEB/RPM-based):从 NodeSource 安装。 其它:使用相应的软件包管理器进行安装,可以参考由 Node.js 提供的指导。 ``` ## 3.3安装Hexo框架 所有必备的应用程序安装完成后,即可使用`npm`安装`Hexo`。不要觉得安装这个框架有多复杂,只需要一条命令就可以了。`npm`是安装工具,`install`表示安装,`-g`表示全局安装,`hexo-cli`表示安装的是hexo框架。 ```c npm install -g hexo-cli ``` ![安装hexo框架](https://img-blog.csdnimg.cn/22a5a578423740fe90df05dba94108b7.png) 安装完框架之后新建一个存放博客的文件夹blogtest,并使用`hexo init`命令初始化这个文件夹。注意新建blogtest文件夹和初始化这个文件夹只需要下面这条命令就可以了。 ```c hexo init blogtest ``` ![ ](https://img-blog.csdnimg.cn/70238fdd98604fa29cf34eb88a2a2a62.png) ![ ](https://img-blog.csdnimg.cn/25aaf2d1aa0c454a8ffaae9992af4cf3.png) 然后进入到我们新建的这个`blogtest`文件夹中,使用`cd blogtest`命令就可以进入这个文件夹。 ```c cd blogtest ``` ![ ](https://img-blog.csdnimg.cn/2a1b74cbe1c94929946af756432a8ec2.png) 接着在这个文件中安装npm依赖。 ![ ](https://img-blog.csdnimg.cn/67970a7c2c7e436f87da5ee0232f2801.png) 这四步必须要做的,等待运行完成,此时文件夹中多了许多文件。这样我们的博客就搭建完了,怎么样是不是很简单。 接在在博客的文件中使用git工具输入`hexo generate`和`hexo server`。`hexo generate`命令是生成静态网页,`hexo server`是将博客部署在本地。 ```c hexo generate && hexo server ``` 然后在浏览器输入`http://locakhost:4000`,可以看到一个网页,说明Hexo博客已经成功在本地运行。这样我们的博客已经安装完成了。 ![ ](https://img-blog.csdnimg.cn/d705d1e95602450eabf294272e596bf6.png) 其实这时候博客已经搭建好了,只不过现在博客还没有穿一件好看的衣服(主题)。下面要操作就是安装主题。 **注意**:有时候在浏览器输入`http://locakhost:4000`,没有出现网页,可能是因为4000端口被占用了。可以使用`hexo s -p 5000`,改为`5000`端口或者其他端口就可以了。 # 4、安装主题 Hexo的主题有很多啊,使用最多的主题就是`matery`主题和`butterfly`主题。这两种主题各有千秋。可以先看两种主题的风格,然后做出选择,这里以`butterfly`主题以例。 ![matery主题](https://img-blog.csdnimg.cn/1a4e32feaf024d518b6016a9865076ef.png) ![butterfly主题](https://img-blog.csdnimg.cn/e40c35ca2eb74131b94551a6b3e7c3a7.jpg) 安装博客butterfly主题有三种方式,安装博客的意思其实就是**下载博客的安装包**,你可以通过git、gitee、npm三种方式下载。建议使用gitee下载,速度比较快。在你的**博客根目录**下使用如下命令,就可以把主题下载到根目录下的themes文件夹中。 ```c git clone -b master https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly ``` ![ ](https://img-blog.csdnimg.cn/0651d07cfe3e4548a88710b3b4f13b3e.png) 安装完成后themes文件夹中就存在了我们的主题了。此时主题就安装好了,然后使用`hexo server`就可以在本地预览博客了。 ## 更换主题 有的小伙伴说我现在不想使用这个主题想换一个麻烦吗?一点都不麻烦,创建Hexo主题非常容易,你只要在`themes`文件夹内,把你的主题文件放进去就可以了,并修改`_config.yml`内的`theme`设定,即可切换主题。一个主题会有以下的结构: ```bash ├── _config.yml ├── languages ├── layout ├── scripts └── source ``` # 5、将博客部署到Github Page中 以上的操作博客已经安装完成了,但是只能在本地看,你的博客肯定是要让别人访问啊,那你就需要将博客部署到Github上面,现在Github就是就托管了你的博客,它就是你的服务器,所以你要感谢Github提供了Page的功能。其实我还是建议部署在码云Gitee上面比较好,因为毕竟在国内,访问速度比较快。但是如果使用码云的话,你就不能自定义域名了,因为码云在今年的3月份关闭了自定义域名的功能,**这真是一个悲伤的消息**。 ![ ](https://img-blog.csdnimg.cn/37b9f5a00dfa469e8bc3905450593213.png) 接着说Github。在Github新建一个仓库,仓库名必须是`用户名.github.io`;仓库名必须是`用户名.github.io`;仓库名必须是`用户名.github.io`。仓库必须设置为**公开的**,因为私有的仓库是不提供`Page`的功能的,需要每个月向Git提供4美刀。其实也不需要设置为私有,公开就行。 ![ ](https://img-blog.csdnimg.cn/61160c8f26eb46c0a88776f4413e24e4.png) 新建完成后将仓库的地址复制粘贴到博客可站点配置文件夹中。 ![ ](https://img-blog.csdnimg.cn/5d4837ead9c14a5c8c458190cebf097b.png) 然后在博客的根目录下安装一个hexo的部署插件(必须安装) ```c cnpm install --save hexo-deployer-git ``` 找到博客文件中的`_config.yml`文件,使用编译器打开,建议使用Visual Studio Code打开,找到这部分代码,(原始的是没有`repo`,和`branch`的,而且`type`后面也没有东西)对这段代码进行更改。 ```html deploy: type: git repository: github: https://github.com/xiaoshidi-hub/xiaoshidi-hub.github.io.git #把博客推送至github branch: master #把博客推送至主分支 ``` * type:一个名字,建议写成git方便识别。 * repo:repository仓库地址 将刚刚新建的github仓库地址复制到这里就可以了。 * branch:分支这里设置管理员`master`。 ![ ](https://img-blog.csdnimg.cn/c0415975de8445edb6f76f6d2fb061be.png) 更改以后进行保存。然后再Git里面输入`hexo d`。将本地文件部署到github新建的仓库中,然后通过访问`https://自己的用户名.github.io`就可以访问部署到Github上的博客了。例如:`https://xiaoshidi-hub.github.io`。 # 6、域名购买和解析 现在我们可以通过`https://用户名.github.io`,来访问我们的博客了。大多数人都会购买一个域名,将我们购买的域名解析到`https://用户名.github.io`。比如我购买的是`liuyao-blog.cn`的域名,那么我将`liuyao-blog.cn`解析到`https://xiaoshidi-hub.github.io`。之后我在浏览器输入就会访问到我们的博客了。是不是很厉害的样子,哈哈哈! 那么域名在哪里购买呢?当然是**阿里云和腾讯云**这样的大厂购买。 ![ ](https://img-blog.csdnimg.cn/6ca2b9b2da0d42d5af9cfc5c1d6c9099.png) 然后去控制台进行解析,这里要一般是解析两条。一条是将`liuyao-blog.cn`解析到`https://xiaoshidi-hub.github.io`;另一条是将`liuyao-blog.cn`解析到`ping xiaoshidi-hub.github.io`得到的IP地址,这很好理解。 ![ ](https://img-blog.csdnimg.cn/1b0d2c2b9304439184dd20f922397b4f.png) 然后在我们的博客**根目录下的source文件夹**下添加一个**CNAME**的文件,注意这个文件没有后缀名,然后在里面填入你购买的域名。 ![ ](https://img-blog.csdnimg.cn/adac1b7e551e42ea82cf509a61281023.png) 然后使用`hexo d`命令将博客部署到`Github`上面。之后在博客的仓库中依次点击`Setting—>Page`。因为你在**CNAME**文件中填了域名,这里3会自动帮你填起来。然后就可是使用你的域名访问你的网站了。 ![ ](https://img-blog.csdnimg.cn/5e6df73590bb4c568ef89550cf4700ed.png) 这里需要注意的一点,我们的购买的域名是需要备案的,因为你相当于建立了一个网站,虽然是一个博客网站,但也是一个网站。你的域名在哪里买的就直接去哪个平台申请备案就可以了。备案的时间有一个周到一个月时间不等。备案的过程审核比较严格,为了防止你搞网站做一些不好的事情,这也很好理解。当然你也可以不备案,**只不过被人在打开你的网站时会被拦截警告**。 ![ ](https://img-blog.csdnimg.cn/68d7d35e034a43df90c0058e6943d22f.png) ![ ](https://img-blog.csdnimg.cn/d3e0d41a31a049829592a1f2f5e1d9e6.png) 至此我们的博客已经搭建完成了,并且搭建的很漂亮。 # 7、将博客部署到Gitee Page中 因为Github的服务器毕竟在国外,访问速度肯定比较慢,所以一般还是建议大家将博客部署在码云Gitee上面,部署的方法与部署在Github上面基本一样的。首先在码云新建一个仓库,**仓库的名称是你的用户名,仓库的名称是你的用户名,仓库的名称是你的用户名。可以设置为私有仓库**,这两点是和github不一样的地方。 然后填写一下远程`Gitee`仓库的地址就可以了。 ![ ](https://img-blog.csdnimg.cn/05880ac2cd4749079fd73a9301ff27f1.png) ![ ](https://img-blog.csdnimg.cn/59e9332b876a4897809d75151acd1c15.png) 然后点击**强制使用https**,更新,就会生成你的Gitee博客地址,是不是跟Github上面的有点像。 ![](https://img-blog.csdnimg.cn/97ba06a24b1b44d6b94dedee2f4500e0.png) 在浏览器输入你的网址就可以打开你的博客啦~ ![](https://img-blog.csdnimg.cn/f3920707e7784d4e81cee5f52c15ff61.png) 然后使用站长工具`ping`一下我们的网址,可以看到基本都是绿色的。说明其他人打开你的网页速度是非常快的。 ![部署在码云](https://img-blog.csdnimg.cn/8dcc0d5d286240e8a108cb7c8f658fca.png) ![部署在github](https://img-blog.csdnimg.cn/1e842fead93d4f6493b9692230b7fc2f.png) ![域名指向github](https://img-blog.csdnimg.cn/0be126e8daa54f6e94c6c4e96b91cb60.png) 可以看到部署在gitee上面的访问速度还是极快的。好了,所有的工作已经全部完成。 博客的配置文件存放在Gitee仓库公众号资料专用文件夹中,大家自取! ```c https://gitee.com/zhiguoxin/Wechat-Data.git ``` 最后欢迎大家浏览我的主页:`https://liuyao-blog.cn/`,备用网址:`https://zhiguoxin.gitee.io/`。在博客搭建过程中如果遇到任何问题欢迎下方留言,一起学习哟。后期再讲如何使用**WordPress**搭建个人专业网站,敬请期待!
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
0
)
果果小师弟
关注
评论
(0)
登录后可评论,请
登录
或
注册
相关文章推荐
MK-米客方德推出工业级存储卡
Beetle ESP32 C3 蓝牙数据收发
Beetle ESP32 C3 wifi联网获取实时天气信息
开箱测评Beetle ESP32-C3 (RISC-V芯片)模块
正点原子数控电源DP100测评
DP100试用评测-----开箱+初体验
Beetle ESP32 C3环境搭建
【花雕体验】16 使用Beetle ESP32 C3控制8X32位WS2812硬屏之二
X
你的打赏是对原创作者最大的认可
请选择打赏IC币的数量,一经提交无法退回 !
100IC币
500IC币
1000IC币
自定义
IC币
确定
X
提交成功 ! 谢谢您的支持
返回
我要举报该内容理由
×
广告及垃圾信息
抄袭或未经授权
其它举报理由
请输入您举报的理由(50字以内)
取消
提交