不花钱零门槛、10分钟搭建自己的线上博客平台

简介: 博客主要是关于自己搭建的过程,遇到的坑的一些总结,给小伙伴提供一些避坑经验。同时上传了自己的代码,可以直接拉去我的快速搭建。

写在前面


  • 之前一直在CSDN上写博文,一次改粉丝可见性,有一篇整理了三年的博文CSDN吃了>_<|||,就给我留了几个字。

在这里插入图片描述
那天晚上伤心了好久,觉也没睡,费了好多时间,还是上学时就开始写的,也有一些小伙伴收藏,所以吸取教训,想自己搞一个备份。自己搭一个博客系统,在Github上托管,后期会放到Gitee上,现在Gitee上的Gitee Page 功能不支持。Github上大多时候是访问不到的。

  • 本篇博文主要是关于自己搭建的过程,遇到的坑的一些总结,给小伙伴提供一些避坑经验。同时上传了自己的代码,可以直接拉去我的快速搭建。
  • 笔记由两部分内容构成: 博客展示具体的搭建教程。不足之处请小伙伴留言。

💪💪 博客搭建思路:基于hexo+Amazing 来实现,本地写好 markdown 之后,在本地将 markdown 渲染成 HTML,然后将渲染好的 HTML 上传到服务端(Github )。所以不需要数据库生产部署不需要环境,很方便。在本地搭建的时候需要Node.jsGit环境。

💪💪 关于 hexo:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。建议小伙伴移步官网了解下:https://hexo.io/zh-cn/docs/

💪💪 关于Amazing主题:是一个基于主题icarus基础之上的一个主题,个人比较喜欢。了解更多请移步 https://github.com/removeif/hexo-theme-amazing

💪💪 如果小伙伴想自己学着搭建,建议小伙伴直接按照官网教程来搞,很easy,这里分享一些避坑经验


💪💪 如果小伙伴想方便一点,也可以直接拉我的代码,按照下面的部署方式就可以了。

💪💪 关于搭建好博客系统如何写文章,其实特别方便,需要指定文件夹新建一个markdown文件,内容如下:

title: 标题
top: 1
toc: 是否显示目录
recommend: 文章推荐权值 
keywords: 关键字
date: 2019-09-19 22:10:43  日期
thumbnail:   https://cdn.jsdelivr.net/gh/removeif/blog_image/img/2019/20190919221611.png  封面图片
tags: 工具教程 标签
categories: [工具教程,主题工具] 分类

博文摘要
<!-- more -->
博文正文

之前就啥都不用管了,一且OK了.

嘻嘻,先展示一下我的成果,然后我们谈谈如何搭建


博客展示

💪 我的博客地址:https://liruilongs.github.io/

💪 博客代码:https://gitee.com/liruilonger/blog_demo

🎈🎈🎈🎈 PC端🎈🎈🎈🎈

首页

在这里插入图片描述

归档

在这里插入图片描述

博客阅读

在这里插入图片描述


🎈🎈🎈🎈 平板🎈🎈🎈🎈

首页

在这里插入图片描述

博客阅读(主题跟换)

在这里插入图片描述


在这里插入图片描述

留言墙

在这里插入图片描述

🎈🎈🎈🎈 手机端🎈🎈🎈🎈

主页 音乐 标签 关于 分类
请添加图片描述 请添加图片描述 请添加图片描述 请添加图片描述 请添加图片描述

具体的搭建教程

💪 默认小伙伴已经安装了Node.jsGit环境。并且Node版本满足要求,Git配置了SSH免密。具体的环境要求参考官网:https://hexo.io/docs/

🎈🎈下面我们愉快的开始吧🎈🎈


💪 Git Bash 执行:

$  git clone git@gitee.com:liruilonger/blog_demo.git

💪 在blog_demo目录下进入cmd执行

npm install

💪 在themes目录同样执行

cd ./themes
npm install

💪 如果以上出现问题,可以按照错误提示或百度,自行解决。

🎈🎈🎈🎈 做到这一部我们的博客框架就已经搭建完成啦 🎈🎈🎈🎈

💪 下面就是生成静态文件

hexo g

💪 启动服务器。默认情况下,访问网址为: http://localhost:4000/

hexo s

控制台打印:

D:\code\blogger\blogger\themes>hexo s
INFO  Validating config
Inferno is in development mode.
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
INFO  Good bye

🎈 🎈 之后我们就可以在本地访问啦。🎈 🎈

部署教程:

结合Github Page 发布静态html

💪 小伙伴可以参考官方文档https://hexo.io/zh-cn/docs/one-command-deployment,我们这里也是采用这种方式部署。

💪 默认小伙伴已经有个Github 账户,并且已经申请Github 客户端的ID密匙,关于Github 客户端的授权申请(可以在这里找一下)

💪 这里需要修改发布的Github 库为自己的库:https://gitee.com/liruilonger/blog/blob/master/_config.yml#L104,并且这个库已开通Github Page。关于Github Page请自行百度。

deploy:
  type: git
  repo: git@github.com:LIRUILONGS/LIRUILONGS.github.io.git # 自己的库URL
  branch: master #部署的分支

🎈 🎈 之后我们就可以使用命令部署了,部署完成之后就可以根据Github Page访问啦🎈 🎈

hexo d

💪 OK这样我们就完成了简单部署,可以通过 Github Page中的URL访问就OK啦,一般为

# https://liruilongs.github.io
https://<Github 用户名 >.github.io

💪 日常写作中,我们可以在写完博客之后,编译,然后发布,就会直接推送到我们的Github Page的库里面。

hexo g
hexo d
D:\code\blogger\blogger\themes>hexo g
INFO  Validating config
Inferno is in development mode.
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Start processing
INFO  Files loaded in 2.45 s
INFO  Generated: album/index.html
INFO  Generated: media/index.html
INFO  Generated: about/index.html
INFO  Generated: message/index.html
INFO  Generated: content.json
INFO  5 files generated in 3.07 s

D:\code\blogger\blogger\themes>hexo d
INFO  Validating config
Inferno is in development mode.
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
warning: LF will be replaced by CRLF in 20

关于Amazing主题中评论留言功能的Github 相关修改,请小伙伴参考Amazing主题作者的README.md
有问题的小伙伴欢迎交流。


结合云服务器ESC发布教程

💪 这里的话如果小伙伴有自己的服务器,那更方便了,直接把静态文件传的服务器上就可以。可以使用Python3自带的模块,也可以使用NginxtomcatWeb 服务器来部署。下面就这几种方式来和小伙伴聊聊

python3 的方式

💪 Python3 搭建Python自带的Web服务器 特别方便,只需要一行命令就可以搞定。 在需要部署的静态文件夹下执行

python3 -m http.server 端口号, 端口号不指定默认是8000

💪 访问搭建的静态Web服务器方式: IP:端口 ,没有python3环境的可以

yum -y install python3

💪 1. 下面我们开始吧。首先把上面本地编译好的静态文件上传的自己的ESC。即public文件夹打包,上传服务器解压。
在这里插入图片描述

## 新建一个文件夹存放静态文件
mkdir public && cd public
## 上传静态文件包
rz -y # Xshell 上传文件,需要lrzsz,没有的可以 yum -y install lrzsz 安装一下
## 解压静态文件包
unzip public.zip 
## 启动服务,这里需要在阿里云配置自己的安全组策略,开放 8084 端口
python3 -m http.server 8084

🎈 🎈 这样我们已经搭好了,之后我们就可以在访问啦。🎈 🎈

# http://39.97.241.18:8084/
http:IP:8084/

在这里插入图片描述

Nginx的方式

💪如果小伙伴的Esc上有Nginx服务器,那更方便了,上传完静态文件,只需要修改一下配置文件 root 配置字段就可以了,重启一下服务就可以搞定了。这次我们还用之前的上传的文件,不在上传了,一般静态文件要上传到Nginxhtml文件夹下。

# 打开配置文件
$ vim /etc/nginx/nginx.conf

在这里插入图片描述
💪修改配置文件

 server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         #上传文件的位置;
        .......

💪或者也可以这样

server {
        listen       80 default_server;  #监听端口 
        server_name  localhost;  # 配置服务名
        
        # 匹配/请求 ,/是根路径请求,会被该location匹配到并且处理
        location / {
            root   /usr/share/nginx/html;  #上传文件的位置
            index  index.html index.htm; #配置首页文件的名称
        }
......

💪重启服务

# 重启服务
systemctl restart nginx.service

🎈 🎈 这样我们已经搭好了,之后我们就可以在访问啦。🎈 🎈

# http://39.97.241.18:80
http:IP:80/

在这里插入图片描述

Tomcat 的方式

Tomcat这里不做太多讲解,搞java的小伙伴应该都不陌生。直接把静态文件丢到 webapp 目录下,重启tomcat就OK啦


我的博客地址:https://liruilongs.github.io/

相关文章
|
7月前
|
文字识别 前端开发
CodeFuse-VLM 开源,支持多模态多任务预训练/微调
随着huggingface开源社区的不断更新,会有更多的vision encoder 和 LLM 底座发布,这些vision encoder 和 LLM底座都有各自的强项,例如 code-llama 适合生成代码类任务,但是不适合生成中文类的任务,因此用户常常需要根据vision encoder和LLM的特长来搭建自己的多模态大语言模型。针对多模态大语言模型种类繁多的落地场景,我们搭建了CodeFuse-VLM 框架,支持多种视觉模型和语言大模型,使得MFT-VLM可以适应不同种类的任务。
752 0
|
7月前
|
存储 云计算 开发者
【预告】阿里云计算新品速递:HPC优化实例商业化发布
5月30日14:00,将推出专为云上高性能计算设计的HPC优化实例hpc8ae,旨在解决现有云计算基础设施对HPC应用优化不足的问题,提供经济高效的仿真解决方案,提升计算效率,加速业务创新。直播中,阿里云专家将展示实例在计算流体、有限元分析等领域的应用,并通过两个云上工业仿真Demo进行实践演示。参与直播还有机会赢取丰富礼品。
【预告】阿里云计算新品速递:HPC优化实例商业化发布
|
7月前
|
关系型数据库 MySQL 持续交付
使用阿里云服务器如何搭建网站?超简单教程!
在阿里云服务器上搭建网站非常简单,尤其是使用轻量应用服务器。只需从应用镜像中选择WordPress镜像,系统将自动安装WordPress及所需环境(PHP、MySQL等)。全过程自动化,无需手动部署。约2-3分钟后,通过服务器公网IP或绑定阿里云域名即可访问和管理网站。详细步骤可参考官方文档。
243 5
|
7月前
|
弹性计算 应用服务中间件 Shell
利用阿里云ECS搭建企业网站的教程
在本教程中,我们将指导如何使用阿里云ECS搭建企业网站。步骤包括:1) 注册阿里云账号并购买ECS实例,选择适当配置;2) 配置安全组,开放必要端口;3) 通过SSH连接ECS,更新系统并安装Nginx;4) 上传网站文件,配置Nginx服务器;5) 绑定域名并配置HTTPS证书。按照这些步骤,你的企业网站将在阿里云ECS上安全运行。
228 1
|
7月前
|
弹性计算 分布式计算 Hadoop
Linux(阿里云)安装Hadoop(详细教程+避坑)
Linux(阿里云)安装Hadoop(详细教程+避坑)
1819 3
|
7月前
|
存储 Cloud Native 大数据
云计算IaaS
云计算IaaS
405 0
|
7月前
|
弹性计算 数据库 云计算
阿里云服务器多少钱一年?2024年阿里云降价了,这些云服务器享年付优惠!
在云计算的时代,云服务器已经成为了企业和个人用户的首选。然而,面对市场上众多的云服务器产品,如何选择一款性价比高、满足自己需求的产品呢?今天,我们就来为大家推荐阿里云的几款超值云服务器,不仅价格亲民,性能也相当出色!
|
7月前
|
弹性计算 Linux 网络安全
云计算|OpenStack|社区版OpenStack安装部署文档(九--- 创建一个虚拟机实例---Rocky版)
云计算|OpenStack|社区版OpenStack安装部署文档(九--- 创建一个虚拟机实例---Rocky版)
101 0
|
7月前
复现sci顶刊中的画中画(局部细节放大)
复现sci顶刊中的画中画(局部细节放大)
492 0
|
Java 应用服务中间件 网络安全
微信公众号开发:对接本地开发环境【内网穿透】
微信公众号开发:对接本地开发环境【内网穿透】
196 0