前言

也是无意间看到一个写个人博客的,看着非常的好看,于是乎一个牛逼而又der想法就产生了:我也要搞一个人的blog,就显摆一下,就是玩。于是这个blog就产生了,写完之后的也是非常的激动,赶紧发给朋友,显摆显摆。后来朋友也都很惊讶,确实还是比较简单的,下面就把这个创建blog的流程写一些,其实网上的流程很多,写的肯定也都比我好,例如我刚就看到一篇,写的真的好细节,我都没想到好多地方,可能一会就要借用他的文章亿点点东西。那为啥不把他的文章复制过来呢,那总要干点自己的事儿,看别人做,和自己做的感觉还是不一样的。慢慢来吧,写的不好也带给我看。那就开始吧。

准备工作

要想搭建自己的博客,需要有一点点前端的知识,例如会点Markdown语法,Git,Node等,还真带有点专业知识,如果你连听都没听过的话,直接放弃,或者练习我,我帮帮你。当然我写的只是一个静态的页面,并没有后台,如果你想搞那种有服务器的,看看别的吧,学会之后记得教教我。编译器我用的VsCode,非常轻量级,WebStorm完全可以,你开心就好。Node和Git是必须安装的。部署的话我是部署到了Gitee上了,因为GitHub相对来说比较慢,反正都行。

初始化项目

好了,先初始化一blog项目,随便新建一个文件夹,然后右键单机,在终端中打开,运行下面代码,或者直接在VsCode上运行。

npm install hexo-cli -g      //安装框架
hexo init blog      //初始化一个博客
cd blog     //切换到blog文件夹
npm install     //安装依赖
hexo server     //运行博客

安装主题

到这里你就的博客就已经搭好了,你完全可以用那个博客,然后修改一下,发表一点文章就行了。但如过你想让你的blog更好看一点,就可以挑选一个主题(有时候网速是比较慢的),如果看上哪个主题了就点击一下标题,别点击图片,点击图片是预览(有的还预览不成),然后你就进入了GitHub地址,然后你就认真看看就行了,可能你看不懂,但你看懂了就真的懂了。反正我也没看懂。

打包为静态网站

我建议新手就直接用原始的主题就行了,花里胡哨的没好处,厉害的人都不用我说,做的都比我的好。所以我说的多了也没啥用。用原始的哈,主要是我不想多写了,其实每一份主题都带有一份主题配置文件,说的都非常的详细,本来想截图的,但是想了想也没必要,还要复制链接,太麻烦,你们需要真正的成长。然后就是下面的命令。

hexo g       //会生成一个public文件,就是静态网站文件,部署即可

会生成一个pubilc文件,把这个文件提交到Gitee上。

网站部署

部署就比较简单了,在你的Gitee项目上找到如下页面,点击服务

点击Gitee Pages,按照他的要求一步一步配置就行了,可能还要身份证正反面,还要手拿身份证,拍个照片,可不是贷款,亲测不是骗人的。

只要不是星期天,审核还是很快的,审核完成之后,就可以把你打包的那个文件部署上来了。然后你就会,哇!在任何浏览器上输入那个网址,就可以看到你的网站了,不要问我网址在哪里?,你部署成功之后就看到了。

总结

不想多说啥,
1、你在Gitee上的仓库名成尽量起的好一点,你像我的地址https://xcc-nsn.gitee.io/life/,最后的那个life就是我的仓库名,不知道中文行不行,你可以挑战一下。
2、可以把部署的那个pages文件拉出来单独建了一个分支,然后直接部署pages分支了,你也可以这样,但要怎么做呢,首先在根目录下面建一个deploy.sh文件,把下面的代码复制上去

#自动化提交
#!/usr/bin/env sh# 确保脚本抛出遇到的错误
set -e# 生成静态文件
npm run build# 进入生成的文件夹
cd public# 如果是发布到自定义域名
# echo 'www.example.com' > CNAMEgit init
git add -A
git commit -m 'deploy'# 如果发布到 https://<USERNAME>.gitee.io
# git push -f git@gitee.com:<USERNAME>/<USERNAME>.gitee.io.git master# 如果发布到 https://<USERNAME>.gitee.io/<REPO>
# 这里需要改一下,把下面的仓库地址换成你的仓库地址就行了
git push -f git@gitee.com:xcc-nsn/life.git master:pagescd -

这就行了,肯定带改一下呀,这是我的配置,,我在配置文件中已经标注了,就是倒数第二行,你定睛一看就可以了。然后运行下面的命令

//项目自动打包提交到Gitee上
npm run deploy

当然还有最重要的就是,你必须要在git bash上运行这段命令,至于为啥我也不清楚,反正我的VsCode配置了git bash了,本来就的没啥用,现在终于看到用途了(哈哈),这你们就自己弄吧。
3、使用主题的,配置文件一定要仔细看,按照配置文件的配置就好了,更改成自己的信息,就是你的了。我遇到了各种图片出不来,视频导入不进去,都是一点一点试出来的。
5、图片可以传到CSDN或者掘金上变成链接,然后使用,但是需要发布文章,例如这些图片就是发到CSDN上的,好像还带水印,就是带水印。
6、遇到问题多搜搜,多试试,总会解决的。

个人心得

说着看别人的文章,也没看。不要害怕一件事,只要你去做,总会做完的。管他好不好持之以恒,问心无愧,一个高中同学给我说的,说的真好。其实我这篇文章并没有写什么,懂得人都能看出来,没什么技术含量,关键是不懂得人他也看不出来。那就先这样吧,你们加油。

下面的文章主要是为了获得图片链接,可以忽略。








搭建个人静态blog相关推荐

  1. Hexo+码云+git快速搭建免费的静态Blog

    原文地址:www.xksblog.top/quickly-bui- 作为一个对技术有着热情渴望的前端小白,对于写Blog这种事也是跃跃欲试.于是乎赶紧从网上搜罗了一堆搭建个人Blog的方法,对比了下, ...

  2. 使用github+hexo搭建静态blog

    解决了个人博客图片不显示问题. 解决了打开页面产生404问题. 学习了如何更换界面主题. 学习了如何使用Git. 注:这篇文章仅仅是入个门,了解一下怎么使用github+hexo创个静态blog,具体 ...

  3. Nodejs中搭建一个静态Web服务器,通过读取文件获取响应类型

    场景 Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档,也可以放置网站文件让全世界浏览,还可以放置数据文件,让全世界下载.目前最主流的Web服务 ...

  4. GitHub+Hexo搭建自己的Blog之-本地环境部署01

    前言 之前我的博客没有绑自己的域名,一直在github上放着,访问起来比较麻烦,前阵子在阿里云买了这个域名,配置上之后,就可以通过自己的域名访问了,有些朋友问我这个博客怎么搭的,用的什么主题,所以准备 ...

  5. 【完全指南】如何在Github上使用Hexo搭建自己的Blog

    [完全指南]如何在Github上使用Hexo搭建自己的Blog 一.在本地安装Hexo 1.简介: Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用Markdown(或其他渲染引擎)解析文章 ...

  6. GitHub+Hexo搭建自己的Blog之(3)-主题配置(Next)

    GitHub+Hexo搭建自己的Blog之-主题配置(Next) 前言 Blog的环境全部搭建完毕了,但是还没有内容,而且hexo默认的主题是不是感觉挺丑的,其实hexo给我们提供了很多主题模板,总有 ...

  7. 通过ssh在服务器用Hexo搭建个人网站-blog、博客

    title: 在服务器用Hexo搭建个人网站(blog) date: 2022-10-16 21:58:49 记录在服务器用Hexo搭建个人网站-blog 前言: ​ 之前就听说有同学搭建了自己的个人 ...

  8. 码云Pages搭建个人静态网站之旅

    码云Pages搭建个人静态网站之旅 1.前言 2.搭建之旅 1.撸起袖子干 2.成果展示 1.前言 码云 Pages 是一个免费的静态网页托管服务,您可以使用 码云 Pages 托管博客.项目官网等静 ...

  9. 使用Nginx搭建前端静态服务器+文件服务器

    大家可能被虚拟主机不太了解,那我们的解释一下,虚拟主机指在一台物理主机服务器上划分出多个磁盘空间,每个磁盘空间都是一个虚拟主机,每台虚拟主机都可以对外提供Web服务,并且互不干扰. 一.Nginx的虚 ...

最新文章

  1. 太赞了,Intellij IDEA 竟然把 Java8 的数据流问题这么完美的解决掉了!
  2. Creating a custom ComboBox item renderer in Flex
  3. python解题软件哪个好_笔试 - 高德软件有限公司python问题 和 答案
  4. linux下源码软件包的安装
  5. poll函数_I/O复用 - 三组I/O复用函数的比较
  6. 【英语学习】【English L06】U03 House L6 Sharing an apartment
  7. 摄像头成像数据可见窗口计算
  8. instsrv.exe srvany.exe 实现不登陆桌面启动
  9. hdu5294(Tricks Device)题解
  10. realityOS会是苹果的新操作系统吗?
  11. 聊天记录怎么录视频 微信聊天记录屏幕录制
  12. 车载之ECU、VCU、MCU、HCU
  13. Windows 开机自启VMware虚拟机
  14. 云原生yaml部署harbor
  15. sht30 linux示例代码,SHT30 Linux标准 i2c-dev 读取程序
  16. python 网格策略_Python版简单网格策略
  17. 解密MySQL 8.0 multi-valued indexes
  18. 如何用Java设计一个简单的窗口界面(初级二)
  19. 2022 开源轮子学习笔记
  20. 内网solr全文搜索服务器,快解析一步映射让外网访问

热门文章

  1. 月薪五万,996真的就像呼吸一样自然吗?
  2. 高价值行为用户一键同步,精准投放提升广告效率
  3. ..asfasfsafsaf
  4. Ubuntu18.04安装QQ、网易云音乐、百度云盘、搜狗输入法
  5. java jar包资源文件_深入jar包:从jar包中读取资源文件
  6. 微信跳wap有哪些作用?
  7. 熵值法的Python实现
  8. 推荐 5 款私藏的优质 Chrome 插件
  9. chown与chmod的区别.
  10. 【slowfast中ava数据集处理】ava数据集,将原视频裁剪为15分钟每段