Skip to content

Cloudflare部署静态站点

con如果是 Jekyll 站点 GitHub 也支持直接自动部署，当然其他一些静态站点Github 也可以通过Action 完成自动部署，但是这里选择Cloudflare 是因为它对建站更友好，尤其是自定义域和保护源码。

1. 创建Pages

控制台主页面 Workers 和 Pages -> 创建应用程序 -> Pages

|500

|500

2. 部署源码

如果是简单的几个Html和js/css 文件，直接上传即可；

这里使用 连接到Git ，使用Github 或 GitLab上的仓库，如果没有绑定Github账号先绑定；

这里比Github友好的地方就行可以选择私有仓库，这样别人就不能直接copy你的源码了

|500

3. 选择部署

当前网站使用的是 mkdocs-material 他是基于 Mkdocs的 所以选择 Mkdocs

因为当前（2023年10月10日） cloudflare 支持了2.0 版本构建系统，~~所以设置环境变量为经典版本 python 3.8~~（请选择0.10，因为) ，原则上支持到python 3.11，之前的版本不支持高版本Python；这也是我最近发现的，因为发现git push 没问题但网站内容没更新，一看cloudflare 部署失败了，所以顺便选择2.0 构建系统了

PYTHON_VERSION = 0.10
|500

保存并部署，继续选择继续处理项目即可

|500

4. 部署完成

|525

其他注意事项

关于 Jekyll 部署，有一点需要注意的是，在国内的用户或许会使用 https://gems.ruby-china.com/ 源，但是Cloudflare 对这个源部署Jekyll不太友好，拉取依赖包特别慢甚至十分钟以上，所以替换成 ruby 官方源

https://gems.ruby-china.com/ # 国内源
https://rubygems.org/ # 官方源

如： 

source "https://rubygems.org/"  
gem "github-pages", group: :jekyll_plugins  

group :jekyll_plugins do  
  gem 'webrick'  
end

当前的博客的配置文件

mkdocs.yml 

site_name: COCO Duck

# 请使用 .nav.yml ,详情查询 mkdocs-awesome-nav 
# nav:
#   - 首页:
#       - index.md
#       - blog/index.md
#       - notes/index.md
#   - 博客:
#       - blog/index.md
#   - 笔记:
#       - notes/index.md
#   - 留言:
#     - liuyan.md
#   - 关于:
#     - about.md


theme:
  name: material
  custom_dir: overrides
  logo: themes/assets/logo.png
  favicon: themes/assets/logo.png
  icon:
    repo: fontawesome/brands/git-alt
  features:
    - content.code.copy
    - header.autohide
    - navigation.instant # https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=nav#instant-loading
    - navigation.tabs # 导航先选卡 https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/?h=nav#navigation-tabs

markdown_extensions:
  - pymdownx.highlight:
      anchor_linenums: true
      line_spans: __span
      pygments_lang_class: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences
  - attr_list
  - md_in_html
  - pymdownx.magiclink
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true
  - admonition


extra_css:
  - themes/stylesheets/extra.css

extra:
  social: # 社交链接
    - icon: fontawesome/brands/github
      link: https://github.com/xx025
      name: GitHub

plugins:
  - search
  - blog:
      post_dir: blog/posts  
      blog_toc: true    
  - awesome-nav:  # 自动生成目录

copyright: Copyright © 2023 coco鸭

requirements.txt 

mkdocs-material  
#mkdocs-awesome-pages-plugin   # 已废弃替换为  mkdocs-awesome-nav  
mkdocs-awesome-nav   
mkdocs-git-revision-date-localized-plugin

Comments