搭建个人静态blog
前言
也是无意间看到一个写个人博客的,看着非常的好看,于是乎一个牛逼而又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相关推荐
- Hexo+码云+git快速搭建免费的静态Blog
原文地址:www.xksblog.top/quickly-bui- 作为一个对技术有着热情渴望的前端小白,对于写Blog这种事也是跃跃欲试.于是乎赶紧从网上搜罗了一堆搭建个人Blog的方法,对比了下, ...
- 使用github+hexo搭建静态blog
解决了个人博客图片不显示问题. 解决了打开页面产生404问题. 学习了如何更换界面主题. 学习了如何使用Git. 注:这篇文章仅仅是入个门,了解一下怎么使用github+hexo创个静态blog,具体 ...
- Nodejs中搭建一个静态Web服务器,通过读取文件获取响应类型
场景 Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档,也可以放置网站文件让全世界浏览,还可以放置数据文件,让全世界下载.目前最主流的Web服务 ...
- GitHub+Hexo搭建自己的Blog之-本地环境部署01
前言 之前我的博客没有绑自己的域名,一直在github上放着,访问起来比较麻烦,前阵子在阿里云买了这个域名,配置上之后,就可以通过自己的域名访问了,有些朋友问我这个博客怎么搭的,用的什么主题,所以准备 ...
- 【完全指南】如何在Github上使用Hexo搭建自己的Blog
[完全指南]如何在Github上使用Hexo搭建自己的Blog 一.在本地安装Hexo 1.简介: Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用Markdown(或其他渲染引擎)解析文章 ...
- GitHub+Hexo搭建自己的Blog之(3)-主题配置(Next)
GitHub+Hexo搭建自己的Blog之-主题配置(Next) 前言 Blog的环境全部搭建完毕了,但是还没有内容,而且hexo默认的主题是不是感觉挺丑的,其实hexo给我们提供了很多主题模板,总有 ...
- 通过ssh在服务器用Hexo搭建个人网站-blog、博客
title: 在服务器用Hexo搭建个人网站(blog) date: 2022-10-16 21:58:49 记录在服务器用Hexo搭建个人网站-blog 前言: 之前就听说有同学搭建了自己的个人 ...
- 码云Pages搭建个人静态网站之旅
码云Pages搭建个人静态网站之旅 1.前言 2.搭建之旅 1.撸起袖子干 2.成果展示 1.前言 码云 Pages 是一个免费的静态网页托管服务,您可以使用 码云 Pages 托管博客.项目官网等静 ...
- 使用Nginx搭建前端静态服务器+文件服务器
大家可能被虚拟主机不太了解,那我们的解释一下,虚拟主机指在一台物理主机服务器上划分出多个磁盘空间,每个磁盘空间都是一个虚拟主机,每台虚拟主机都可以对外提供Web服务,并且互不干扰. 一.Nginx的虚 ...
最新文章
- 太赞了,Intellij IDEA 竟然把 Java8 的数据流问题这么完美的解决掉了!
- Creating a custom ComboBox item renderer in Flex
- python解题软件哪个好_笔试 - 高德软件有限公司python问题 和 答案
- linux下源码软件包的安装
- poll函数_I/O复用 - 三组I/O复用函数的比较
- 【英语学习】【English L06】U03 House L6 Sharing an apartment
- 摄像头成像数据可见窗口计算
- instsrv.exe srvany.exe 实现不登陆桌面启动
- hdu5294(Tricks Device)题解
- realityOS会是苹果的新操作系统吗?
- 聊天记录怎么录视频 微信聊天记录屏幕录制
- 车载之ECU、VCU、MCU、HCU
- Windows 开机自启VMware虚拟机
- 云原生yaml部署harbor
- sht30 linux示例代码,SHT30 Linux标准 i2c-dev 读取程序
- python 网格策略_Python版简单网格策略
- 解密MySQL 8.0 multi-valued indexes
- 如何用Java设计一个简单的窗口界面(初级二)
- 2022 开源轮子学习笔记
- 内网solr全文搜索服务器,快解析一步映射让外网访问