从零开始搭建mx-space

从零开始搭建mx-space

前言

本文并非是从完全零的开始搭建mx-space,因为我的服务器已经搭建了wordpress,所以有些环境和条件已经具备了,但是基本上都没有。

那么mx-space是什么呢?就是一个用手撸的博客,不同于wordpress、typecho这类php的语言,是基于js语言的,具体技术栈详情查看站点

那为什么我已经有wordpress了还要搭一个这个网站呢?~~纯粹是因为闲的,~~不是,是因为我在写分享好看的网站主题这篇文章,从开往里面看到 Innei 这个站点,发现和我之前看到的主题都不一样,我还想找一下他的主题是什么,因为习惯性思维是用了现有的博客框架,结果发现他是自己写的,太牛了,你想想看,前端后端,前台后台,这工作量多大啊,这架构多牛啊,我这个研二的废物什么都不懂,又是星星之火啊,燎起我的欲望。最关键的还是我大温州人!

因此我的目标有以下几点:

  1. 把博客搭起来
  2. 了解一下体系架构,比如NextJS、NestJS等等
  3. 看看源码
  4. 共同参与开源
  5. ……

虽然目标看起来非常的远大吧,但是多吸收吸收别人的项目经验,转化为自己的,并且不断思考进取,相信我也能够做出自己的项目,加油好吧。

哈哈,他直接有docker的部署,我想直接拿过来用了,说实话,懒狗,不想学习,学个屁学。主要他这个部署是前后端分离的,每次更新都比较麻烦吧,三个端还都同步联调。说实话,确实很崇拜这个人写的东西,但他腹泻式更新,两三天就更新一个版本,这哪里顶得住。反正我肯定顶不住了,我还是慢慢磨基础好了,学习一下体系架构,框架啊,现阶段还是直接用docker来的方便舒服。

但说实话,我搭起来之后拿这个博客干嘛呢?确实不清楚。但肯定剥离掉我这个人的属性,毕竟现在用的szx.life更符合我本身,biss.ren反倒有点……

准备

首先是做网站一般的流程,就是买服务器、买域名、备案,这样子网站才能正式上线,没有备案的话,域名是不能被访问的,但是由于我用教育网,不用备案也能访问,不知道为什么,所以前期买完就可以直接搭建了。

硬件配置

  • 腾讯云的2核4G轻量应用服务器,6M宽带,60G SSD云硬盘,三年688。
  • 域名biss.ren,去域名服务商注册一个,我的首年30块钱,续费一年35块钱。
  • 后续再用CDN加速,前期先搭建起来
  • 操作系统为Ubuntu20.04 LTS版本

软件条件

  • Redis
  • MongoDB (with mongodb-tools)
  • Node 16.6+
  • Git, curl, zip, unzip

安装软件

node

参考链接:https://github.com/nodesource/distributions/blob/master/README.md

#添加16.x最新的源
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
#安装
sudo apt-get install -y nodejs
#查看版本,我的版本为v16.11.0
node -v

Redis

参考链接:https://redis.io/download

#安装
sudo add-apt-repository ppa:redislabs/redis
sudo apt-get update
sudo apt-get install -y redis
#查看版本
redis-cli -v

Mongodb

参考链接:https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/

#添加公钥
wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -
#为 MongoDB 创建一个列表文件
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list
#更新本地数据库
sudo apt-get update
#安装MongoDB包
sudo apt-get install -y mongodb-org
#查看安装版本
mongo --version
#查看mongodb-tools版本
mongodump --version
#运行mongodb
sudo systemctl start mongod
#查看运行状态
sudo systemctl status mongod
#重启后启动
sudo systemctl enable mongod

其他

sudo apt install -y zip unzip

开始

安装

参考链接:https://mx-docs.shizuri.net/

可选:参考文章把git换成国内加速源,但这个加速源只能下载不能上传,如果需要push,需要去除。

mkdir mx-space
# kami是前台界面,--depth 1表示只克隆最新的分支
git clone https://github.com/mx-space/kami.git --depth 1
# admin是后台界面,next是vue3写的
git clone https://github.com/mx-space/admin-next.git --depth 1 admin
# server是后端程序
git clone https://github.com/mx-space/server-next.git --depth 1 server

# 以下可选,但是建议,更换分支到最后一个稳定版本
cd kami && git fetch --tags && git checkout $(git rev-list --tags --max-count=1) && cd ..
cd admin && git fetch --tags && git checkout $(git rev-list --tags --max-count=1) && cd ..
cd server && git fetch --tags && git checkout $(git rev-list --tags --max-count=1) && cd ..

安装pnpm(用过npm和yarn,现在又来个pnpm??作者确实非常喜欢用最前沿的东西,我喜欢)

sudo npm i -g pnpm

安装各个项目依赖

cd kami && pnpm i && cp .env.example .env && cd ..
cd admin && pnpm i && cd ..
cd server && pnpm i && cd ..

服务端

完成之后可以先跑一下服务端,在此之前请确保 Mongo 和 Redis 已经正常工作。

cd server && npm run start

端口转发到本地

ssh -f -N -L 2333:localhost:2333 username@host

访问http://localhost:2333/api-docs就可以看到所有的REST API。

或者访问http://localhost:2333/graphql 进入 GraphQL Playground。(不明觉厉)

进入http://127.0.0.1:2333/qaqdmin可以进入后台管理。

前端

启动前端界面

cd kami
npm run start

因为命令行端口转发比较麻烦,我就通过vscode进行端口转发了,比较方便。

访问http://127.0.0.1:2323就有界面了。

结束

好了,到这里就完事了,没有下文了,也就是我的mongodb和redis都白安装了,nodejs倒还行,以后还用得着,直接采用docker部署,因为docker还能直接更新。

草了,docker部署失败,不知道什么问题,还是老老实实传统部署吧。

算了,不部署了,他用的caddy2进行配置,但我nginx配置有点问题。而且我发现这个前端算是比较卡通风,而且定位是个人博客空间,因为我已经有了一个个人博客了,第二个最好还是不要面向个人博客空间类型的,定位不明确。

所以本项目直接烂尾。

docker部署

参考链接:https://github.com/mx-space/docker#readme

docker和docker-compose我已经装过了,就不再重复了。

#安装yarn 、zx 和pnpm
sudo npm i -g yarn zx pnpm

mkdir -p mx
cd mx
git clone https://github.com/mx-space/docker --depth=1
cd docker
zx ./build.js

发现一个蛋疼的问题,它采用的是caddy进行部署,但我服务器上已经有了nginx,80端口和443端口会冲突,所以不能直接采用上述的方法。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇