不花钱,用一个小时搭建自己的博客网站

简介: 不知道大家平常有没有写博客的习惯,一般写博客都会记录什么?都会在哪里写自己的博客呢?

不知道大家平常有没有写博客的习惯,一般写博客都会记录什么?都会在哪里写自己的博客呢?


强哥平常就有写博客的习惯,不过没有强制自己多久写一篇,一般都是工作中遇到问题解决问题了会写篇博客分享一下。


前前后后,在CSDN上总共也写了217篇博客了(原创87篇)。最新的总排名到了3823名。


哈哈,虽然自己也没有特殊的去整理自己的博客,没有系列总结系列文章,不过能够通过平常的总结分享帮助到大家自己也就挺高兴了。


但是话说回来,强哥最近也觉得,总是在博客平台上写文章,一直都没有一个归属于自己的博客网站,总是有点不够高端大气上档次。于是,前些天,就花了点时间,用Hexo在Gitee上整了一个自己的博客网站:https://breakingdawn.gitee.io/blog/。选了自己喜欢的主题搭建完后,是这样色儿的:


30.png


哈哈,不知道大家觉得怎么样,不过这个主题确实就是我喜欢的风格:简单直白,不花里胡哨,最重要的是一目了然。


话不多说,如果你也被上面的博客网站打动的话,就赶紧行动起来。重点是一毛钱不花,按教程走,一个小时左右就能搭建完。强哥虽然最开始搭建不止花了一小时,不过在把弯路都走过之后。现在自己要再搭建类似的网站,根据下面的教程,一个小时准够。


小伙伴们先无脑按教程操作,搭建成功后,自然很多东西就都懂了。


一、本地环境搭建


1.1、安装git:


按照如下地址安装:https://www.runoob.com/git/git-install-setup.html


1.2、安装node:


(Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本) 按照如下地址安装:https://www.runoob.com/nodejs/nodejs-install-setup.html


1.3、安装hexo:


上一步安装完node后,直接打开终端,输入命令:


npm install -g hexo-cli


1.4、创建gitee账号


很多人gitee可能还不知道是什么,gitee就是马云,哦不,是码云。也就是国内的“github”。这个自己登录网站创建吧:https://gitee.com/


1.5、建完账号后,配置gitee的ssh公钥(可选):


这一步非必须,使用http克隆的可忽略。不过强烈建议配置下,之后提交代码什么的会方便很多。配置教程:https://gitee.com/help/articles/4181#article-header0


二、搭建Hexo博客


2.1、初始化Hexo博客


随便建一个空目录,输入如下命令,并安装前端依赖包


cd <folder> //进入空目录
hexo init     //初始化
npm install    //安装依赖包


运行完后,目录结构如下:


31.png


2.2、本地试运行Hexo服务


输入如下命令运行最原始的Hexo服务


hexo s    //左边是hexo server的简化命令


输入后终端显示如下:


32.png


浏览器访问http://localhost:4000/ 如下


33.png


2.3、选主题啦


哈哈,这个可以说是最耗时的了,为什么,因为hexo支持的好看的主题太多了。

主题地址:https://hexo.io/themes/ 


强哥博客网站用的是pure主题,对应主题地址:https://github.com/cofess/hexo-theme-pure 对应主题使用教程:https://blog.cofess.com/2017/11/01/hexo-blog-theme-pure-usage-description.html


配置完主题后,本地再次运行。如果顺利,重新启动hexo服务后,应该就能在http://localhost:4000/ 看到新的主题博客网站了。


三、创建Gitee仓库


首先很多人会问为什么不去github上搭建,而要在Gitee上。原因有二:


  1. Github网站毕竟是境外网站,访问比较卡;
  2. Gitee支持直接对Hexo源码进行编译更新,而Github暂时还只支持Jekyll进行编译更新(Jekyll是类似Hexo的另一种静态网站生成工具)。


3.1、创建仓库


这里要注意,如果你想要一个创建一个首页访问地址不带二级目录的 pages,如ipvb.gitee.io,而不是ipvb.gitee.io/blog 。那么,你需要建立一个与自己个性地址同名的仓库,如 https://gitee.com/ipvb 这个用户,想要创建一个自己的站点,但不想以子目录的方式访问,想以ipvb.gitee.io直接访问,那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后,就可以以 https://ipvb.gitee.io 进行访问了。


登录gitee后,点右上角创建仓库


34.png


3.2、克隆仓库到本地


复制如下位置的仓库地址


35.png


在本地选择一个合适的博客代码存放的空目录,输入如下命令克隆仓库:


git clone git@gitee.com:xxx/demo.git  //修改你自己仓库对应的地址


克隆完后,进入本地仓库目录。


Http方式克隆的就将上面地址改成Http的仓库地址克隆即可。


3.3、添加gitignore文件


在本地仓库目录下,新建文件:.gitignore,内容如下:


/node_modules
/public
/.deploy_git


3.3、复制博客代码到当前目录下


直接将第二步骤创建好的博客代码(不要最外层的文件夹,只要与_config.yml同级别的所有文件或文件夹) 复制到当前的仓库目录下。


然后在当前文件夹下,再重新启动下hexo server看看是否还能再次浏览(强哥试过,应该是能正常显示)


3.4、git提交代码


直接输入如下命令将代码同步到仓库


git add .    //添加文件夹下所有代码到git
git commit -m "xxx"    //提交代码并添加消息xxx(消息内容自行修改)
git push -u origin master    //推送源码到gitee远程仓库上


四、线上服务部署


4.1、查看代码是否成功推送


直接刷新gitee上仓库,看看代码是否成功提交


4.2、开通gitee pages服务


首先点击服务,gitee pages服务:


36.png


第一次点进去,需要提交身份证信息进行认证:


37.png


认证要1个工作日审核,一个工作日认证完后,页面是这样的:


38.png


4.3、启动服务


这里注意一点就是:gitee上的hexo源码,可以直接在上面更新成静态网站,而不需要像很多教程里说的,还要在本地进行hexo g -d的操作,将编译后的代码推送到gitee仓库上。


直接点击启动按钮(第二次就会变成更新按钮),gitee就会自动在线编译部署服务了(自动npm install,hexo deploy)。启动完后,页面如下:


39.png


直接点击链接就能看到我们的网站在公网上部署成功了。


4.4、修改配置


哈哈,如果你之前弄主题的时候,url的配置没有修改的话,那页面可能会是这样


40.png


这个时候,只要修改博客源码_config.yml的url参数为你的新域名即可:


41.png


然后在gitee pages页面,点更新后,网站就能正常显示了。


42.png


五、写博客


新建Markdown文件


直接在本地新建一个Markdown的文件,并编写我们自己的博客内容。


给博客文件加上标签等信息


在博客文件的文件最上方,添加如下信息:


title: 大家新春快乐~ date: 2022-01-31 22:54:00 categories:


  • 生活 tags:
  • 生活记录 toc: true # 是否启用内容索引 效果如下:


43.png


  • 然后将新建的博客文件放入到source/_posts 目录下,最后上传到gitee仓库上,更新gitee pages服务即可。


关于博客的图片地址


博客因为是Markdown文件写的,所以如果我们在本地直接粘贴的图片地址,地址会是本地主机的,那么等gitee仓库上更新服务后,会导致图片无法显示。所以,解决办法有如下两种:


  1. 我们将博客对应的图片文件放到一个固定的源码目录下,然后在Markdown文件上使用相对地址引用它。
  2. 我们将图片传到公共图床上(图床就是其他公司给我们提供的装门方图片的服务器,如:七牛图床、微博图床等)。然后Markdown文件直接用链接方式引用图片。

写在最后


好啦,通过上面的教程,大家跟着走,应该很快就能拥有一个自己的博客网站啦。


强哥还是很建议大家去动手搞一搞的,第一次搭建完自己的网站应该还是很有成就感的。当然如果有问题,也可以在这篇推文下留言或者在后台留言,强哥看到了会及时回复的哈。

相关文章
|
6月前
|
JavaScript 前端开发 测试技术
"0元搞定!手把手教你建网站,简单得就像泡桶方便面一样,上线个人网站轻而易举!"
没有服务器和公网IP,想要其他人访问自己做好的网站,该怎么办?今天教大家使用这款简单免费的内网穿透小工具——ngrok,有了它轻松让别人访问你的项目~
|
弹性计算 关系型数据库 MySQL
「寻找博客建站大师」详细活动流程
阿里云开发者社区联合弹性计算团队和数据库团队举办「寻找博客建站大师」,领取云服务器ECS和云数据库RDS MySQL Serverless两款云产品免费试用资源,搭建属于自己独一无二的博客吧!晒出你的专属博客参与评选,就有机会获得Airpods Pro、戴尔机械键盘 、数据库双肩包、罗马仕充电宝等精美礼品!
|
存储 JavaScript 关系型数据库
一小时搭建属于自己的博客系统网站
The most powerful and extensible open source Wiki software 最强大和可扩展的开源Wiki 软件
432 2
一小时搭建属于自己的博客系统网站
|
弹性计算 前端开发 NoSQL
新手学生上线我的博客
自己参加飞天加速计划活动,阿里云助力学生免费上线项目,我也成功使自己的小项目上线,在学期间学习前端相关知识,逐渐熟练后便开编写了一个小项目,通过老师了解阿里云的飞天加速计划活动,通过新手预备营学习了上线服务器的步骤,再经过学习发现问题解决问题,最后成功上线自己的项目。
143 1
新手学生上线我的博客
|
缓存 JavaScript 前端开发
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
|
SQL NoSQL 关系型数据库
阿里云学生机2周学习记录
自我介绍:大家好我是来自河南省大四的一名大学生,专业为计算机科学与技术。由于学习项目部署以及linux服务器就想把自己写的项目部署到公网上,之前是直接在本地装的虚拟机做的部署,现在就打算使用阿里云服务器,通过同学了解到阿里云对学生用户有试用以及优惠政策“飞天加速计划·高校学生在家实践”。
阿里云学生机2周学习记录
|
弹性计算
阿里云双十二1核2g 三年174(小白详细教程)
每年的双十二是12月初就开始预告了,2021年阿里云双十二于12月13号正式开始 让我们来看下有那些精彩部分值得抢购
281 0
阿里云双十二1核2g 三年174(小白详细教程)
|
域名解析 网络协议 JavaScript
十分钟上线无成本Hexo博客
Github Pages+Hexo+Git+npm+node.js
157 0
|
JavaScript Java 应用服务中间件
不花钱零门槛、10分钟搭建自己的线上博客平台
博客主要是关于自己搭建的过程,遇到的坑的一些总结,给小伙伴提供一些避坑经验。同时上传了自己的代码,可以直接拉去我的快速搭建。
201 0
不花钱零门槛、10分钟搭建自己的线上博客平台
|
域名解析 算法 安全
搭建一个网站多少钱?
价位通常并不是固定的,而是跟自身的需求与期望满意度息息相关。
1772 0
搭建一个网站多少钱?
下一篇
无影云桌面