使用Python开发的静态博客极速部署GitHub

suiyan 碎言静态博客

介绍

碎言这个名称取自与"碎言片语",码兄累了吗?累了就休息一下,为未来的自己留下一些碎言片语吧。

演示(github): 碎言博客

一键切换主题,自动主题。

软件架构

2023-03-24 新版 3.0.0 发布啦!

集成了jinja2的模板引擎,大大的提高了静态页面的构建速度, 支持模板主题的制作。

使用了asyncio和aiofiles模块来实现异步IO操作,提高了生成静态博客页面的效率,几百页面瞬间生成。

更新当前博客主题:使用了pico.css样式,大道至简,返璞归真,没有组件,只有HTML标签。

构建博客索引并可以通过标题进行全站搜索。

博客文章写作采用Markdown技术支持,让你专注写作更流畅。

推荐使用Vscode搭配进行blog文章的编写(因为当创建新文章后会直接使用vscode直接打开)

如果新建blog文章无法在vscode中打开,请在命令面板中搜索shell,在PATH 中安装code命令。

安装教程

首先克隆下载碎言静态博客,

终端运行:

pip install -r requirements.txt

如果速度太慢请使用镜像:

pip install -r requirements.txt -i http://mirrors.aliyun.com/pypi/simple/

安装相关依赖。

博客的管理支持终端和图形界面:

图形界面:

python3 w.py

终端启动命令:

python s.py

可以根据自己的喜好进行选择。

目录结构

下边是一个完整的项目结构,有些目录需要创建md文件和生成静态文件后才会显示。

├── LICENSE 开源协议
├── README.md 说明文档
├── articles md文件存放目录(名称可以自定义)
├── blog 静态文件存放目录(名称可以自定义)
├── config.json 站点配置文件
├── logs 日志存放目录
├── requirements.txt 依赖文件
├── s.py 主程序和终端操作命令行
├── seo 这里存放着一些SEO文件,比如验证,robots.txt
├── theme 主题目录,下边的每一个目录对应一个主题,可以在配置文件里修改主题
├── utils.py 程序依赖的方法
└── w.py 窗口操作的程序

首次运行

首次运行建议先修改根目录下的配置文件config.json这里简单介绍一下配置项:

{
    "dev": 0,  # 调试模式,如果改为1,则使用"blog_test_url"来添加静态资源地址前缀,方便本地调试。
    "blog_name": "碎言博客",   # 站点名称
    "blog_name_en": "SuiYan", # 站点英文名称
    "blog_author": "J.sky", # 站长昵称
    "blog_description_en": "You see see you , This one day day di.",  # 站长简介
    ## 下边是网页中的meta
    "meta_description": " Python Django JavaScript 学习讨论,我们是一群热爱Python的程序员,人生苦短,我用JavaScript!一个不会JavaScript的Python开发者不是一个好网管。",
    "meta_keywords":"Python,Django,JavaScript,程序员,人生苦短,我用Python",
    "profile_image":"assets/images/touxiang.jpg",  # 头像地址
    "blog_bg": "assets/pexels-masha-raymers-3068711.jpg", #当前站点背景图片地址
    "theme": "default_theme", # 当前使用的主题目录名称
    "build": "blog", # 静态文件的目录名称
    "md_dir": "articles", #md文件目录
    "blog_page_num":4,# 静态站点首页的数据分页数值
    "blog_test_url":"http://127.0.0.1:5500/blog/", #本地调试是的测试地址前缀
    "blog_url":"https://suiyan.cc/", # 你的域名,生产模式使用
    "github":"", # 这个是你的仓库地址前缀,暂时无用。
    # sns 图标 和地址,图标的选择,后边会说。
    "blog_sns": [
        {
            "ico": "github",
            "url": "https://github.com/bosichong/suiyan"
        },
        {
            "ico": "git",
            "url": "https://gitee.com/J_Sky/suiyan"
        },
        {
            "ico": "weibo",
            "url": "https://weibo.com/qq285911"
        },
        {
            "ico": "qq",
            "url": "https://user.qzone.qq.com/285911/"
        },
        {
            "ico": "book",
            "url": "https://www.zhihu.com/people/J_sky/activities"
        },
        {
            "ico": "rss",
            "url": "https://suiyan.cc/rss.xml"
        }
    ],
    # 站点的导航
    "nav": [
        {
            "ico": "home",
            "text": "Blog Home",
            "url": "index.html"
        },
        {
            "ico": "archive",
            "text": "Blog Archive",
            "url": "archives.html"
        },
        {
            "ico": "tags",
            "text": "Blog Tag",
            "url": "tags.html"
        },
        {
            "ico": "user",
            "text": "About Me",
            "url": "aboutme.html"
        }
    ]

}

配置文件可以根据自己的需要添加删除,在jinja2 模板中使用{{ 属性名称 }}来调用。

修改完毕后就可以穿件文章了。

创建文章

python z.py -n 此处写文章标题

注意!文章标题为必填!

这个时候就会在articles目录下创建一篇文章,并且使用vscode直接打开。 如果你没有安装vscode的命令行,需要安装后才会打开,但是文件会被创建

修改博客及站长资料

config.json里存放着一些站点的资料,上传前建议先修改成自己的资料。

运行站点

本地主题开发编写,推荐使用Live Server这个vscode得插件,非常方便。 在配置文件里修改: "dev": 1, # 调试模式,如果改为1,则使用"blog_test_url"来添加静态资源地址前缀,方便本地调试。

修改站点样式

采用jinja2模板引擎,在主题或是模板目录修改样式,一键生成页面,直接同步页面。 在jinja2 模板中使用{{ 属性名称 }}来调用。站点图标: FontAwesome 4.7.0 中完整的675个图标样式CSS参考

部署

git push origin master

提交blog目录下所有文件到git仓库即可,blog就是所有博客的全部文件!

github pages

如何部署GitHub pages 搭建自己的博客,这里就不在详细介绍了,请参考下文。

GitHub Pages 快速入门

本项目地址:

GitHub仓库下载icon-default.png?t=N2N8https://github.com/bosichong/suiyan 

Gitee仓库下载icon-default.png?t=N2N8https://gitee.com/J_Sky/suiyan

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 为了把静态网页部署GitHub 上,你需要以下步骤: 1. 创建一个新的 GitHub 仓库,或者找一个已有的仓库。 2. 在本地的电脑上使用 Git 命令初始化仓库。 3. 将你的静态网页文件添加到仓库中。 4. 使用 Git 命令将这些文件提交到仓库。 5. 将仓库同步到 GitHub 上。 这样你就可以在 GitHub 上查看和访问你的静态网页了。 ### 回答2: 要将静态网页部署GitHub上,可以按照以下步骤进行操作: 1. 创建GitHub账户并登录。如果没有账户,可以在GitHub官网上进行注册。 2. 在GitHub上创建一个新的仓库。点击页面右上角的“+”按钮,选择“New Repository”。 3. 在仓库名称一栏中输入一个适合的名称,例如“my-website”。确保仓库为公开状态,并勾选“Initialize this repository with a README”。 4. 将静态网页的文件夹上传至GitHub仓库。可以使用Git命令行工具或者GitHub Desktop等工具来操作。 5. 打开需要部署静态网页文件夹,确保其中包含一个名为“index.html”的主页文件。 6. 在GitHub仓库页面中,点击上方导航栏的“Settings”选项。 7. 在“GitHub Pages”部分,将“Source”设置为“main”分支,并点击保存。 8. 等待片刻后,会在同一页面的“GitHub Pages”部分看到一个网址链接,表示网页已经成功部署。可以通过点击链接访问部署后的静态网页。 总结: 将静态网页部署GitHub上需要先创建一个仓库,然后将网页文件夹上传至仓库中,并确保主页文件命名为“index.html”。最后,在仓库的“Settings”中将“Source”设置为“main”分支,即可通过部署后的网址链接访问到静态网页。 ### 回答3: 要将静态网页部署GitHub上,需要完成以下步骤: 1. 创建GitHub仓库:登录GitHub,点击左上角的“+”号,选择“New Repository”创建一个新的仓库。 2. 命名仓库并设置可见性:输入仓库名称,并选择仓库的可见性设置,可以选择公开或私有。 3. 克隆仓库到本地:在本地的终端或命令行中使用以下命令克隆仓库到本地: ``` git clone <GitHub仓库地址> ``` 4. 创建并切换到gh-pages分支:在本地仓库的根目录下,输入以下命令创建并切换到gh-pages分支: ``` git checkout -b gh-pages ``` 5. 将静态网页文件复制到本地仓库:将静态网页的HTML、CSS、JavaScript等文件复制到本地仓库的根目录下。 6. 提交更改并推送到GitHub仓库: ``` git add . git commit -m "Add static webpage files" git push origin gh-pages ``` 7. 等待推送完成后,在GitHub仓库的页面上刷新,就能看到静态网页的文件列表。 8. 访问部署静态网页:点击GitHub仓库页面上的“Settings”,在“GitHub Pages”部分,找到“Your site is published at”后面的链接,点击即可访问部署静态网页。 通过以上步骤,可以将静态网页成功部署GitHub上,从而实现在线访问和分享。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这里不提提纳里

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值