Giter Club home page Giter Club logo

note's Introduction

Note Github Action VuePress Version GitHub repo size

基于 VuePress 搭建的个人笔记静态站点,在线预览:https://jinhui.dev


本地部署

在本地部署一个最小依赖的VuePress,适用于开发环境

  • 仅支持内网访问
  • 使用内置的开发服务器
点击查看详情

# (1) 下载源码
# [root@localhost ~]# git clone --depth 1 [email protected]:vvfock3r/note.git
[root@localhost ~]# git clone --depth 1 https://github.com/vvfock3r/note.git
[root@localhost ~]# cd note

# (2) 安装依赖
[root@localhost note]# yarn
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "vuepress>[email protected]" has unmet peer dependency "@vuepress/client@^2.0.0-beta.42"
warning "vuepress>[email protected]" has unmet peer dependency "vue@^3.2.35"
[4/4] Building fresh packages...
Done in 2.05s.

# (3) 启动服务
[root@localhost note]# yarn docs:dev
yarn run v1.22.17
$ vuepress dev docs
info Initializing VuePress and preparing data...

  vite v2.9.9 dev server running at:

  > Local:    http://localhost:8080/
  > Network:  http://10.0.8.4:8080/
  > Network:  http://172.17.0.1:8080/
8:20:02 PM [vite] ✨ optimized dependencies changed. reloading


容器部署

使用容器正式部署一个个人笔记静态站点,适用于正式环境

  • 支持HTTPS(默认)HTTP访问
  • 支持HTTP 2(默认)HTTP 1.1协议
  • 所有依赖全部打包到镜像方便管理和迁移
点击查看详情

# (1)下载源码
# [root@localhost ~]# git clone --depth 1 [email protected]:vvfock3r/note.git
[root@localhost ~]# git clone --depth 1 https://github.com/vvfock3r/note.git
[root@localhost ~]# cd note

# (2) 构建镜像并启动容器
[root@localhost note]# docker image build -t nginx:webserver --memory 2g .

# (3) 启动容器
[root@localhost note]# docker container run \
--name jinhui.dev \
-p80:80 -p443:443 \
--restart always \
--memory 1g \
-d \
nginx:webserver

# (4) 域名解析
#     1、公网解析需要修改 jinhui.dev和www.jinhui.dev A记录
#     2、本地解析可以使用/etc/hosts
[root@localhost note]# grep -E "[[:blank:]]jinhui.dev$" /etc/hosts \
|| sed -i '$a 127.0.0.1 jinhui.dev' /etc/hosts

[root@localhost note]# cat /etc/hosts
127.0.0.1 jinhui.dev


自动发布

  • Webhook
  • Github Action(推荐)
点击查看详情

(1)自动发布方式对比

发布方式 说明 优势 劣势
Webhook (1)首先启动一个公网可访问的Web Server
(2)当有代码提交时,Github会给Web Server发送POST请求
(3)Server接到请求后执行发布所需要的一系列流程
简单 服务器需要额外开放一个端口;
打包等操作会占用服务器资源
Github Action 我们只需要编写一个YAML文件在Github所提供的云环境内进行各种操作完成发布 无额外端口开放;
不占用系统资源
YAML编写略复杂;
通常需要开放SSH端口给云环境

(2)Webhook

服务端配置

# (1)下载源码到/root/下
# [root@localhost ~]# git clone --depth 1 [email protected]:vvfock3r/note.git
[root@localhost ~]# git clone --depth 1 https://github.com/vvfock3r/note.git

# 拷贝 note/scripts/webhook.py
[root@localhost ~]# cp -raf note/scripts/webhook.py .

# 修改Github_Secret,保持与Web界面配置的一样
[root@localhost ~]# vim webhook.py.py
...
Github_Secret = "1YbutGiyBDV6hlix"  # 根据实际情况修改
...

# 启动Server
[root@localhost ~]# tmux new -s webhook
[root@localhost ~]# python3 webhook.py 
 * Serving Flask app 'webhook' (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on all addresses.
   WARNING: This is a development server. Do not use it in a production deployment.
 * Running on http://10.0.8.4:12345/ (Press CTRL+C to quit)

Github Web配置

image-20220623124356891

(3)Github Action(推荐)

编写YAML

参考:https://github.com/vvfock3r/note/blob/main/.github/workflows/main.yml

配置Github Secrets

image-20220623124558992


VuePress 2.x配置


联系我😊

如果您有任何问题欢迎通过如下方式联系我

note's People

Contributors

skyma3 avatar vvfock3r avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

jami1024

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.