免费自己做网站制作一个网站的流程

张

张建站

2026/6/11 17:47:15

10分钟阅读

免费自己做网站,制作一个网站的流程,网站内容建设方法步骤,做百度网络营销推广发布于#xff1a; Hexo中字体的引入与压缩 | Eucalyptushttps://blog.mingliang.net.cn/2026/02/13/%E5%AD%97%E4%BD%93%E7%9A%84%E5%BC%95%E5%85%A5%E4%B8%8E%E5%8E%8B%E7%BC%A9/ 引入 tff 字体本文中涉及的文件没有的话再对应的目录下创建即可首先#xff0c;找一个你…发布于Hexo中字体的引入与压缩 | Eucalyptushttps://blog.mingliang.net.cn/2026/02/13/%E5%AD%97%E4%BD%93%E7%9A%84%E5%BC%95%E5%85%A5%E4%B8%8E%E5%8E%8B%E7%BC%A9/引入 tff 字体本文中涉及的文件没有的话再对应的目录下创建即可首先找一个你喜欢的字体。你可以在一些网站上免费下载。下载完之后把那个.ttf 格式的文件放到你网站根目录下的 /source/fonts 文件夹里。免费字体下载大全可免费商用中文字体一览表 - 猫啃网接下来你需要把下面的代码加到 /source/css/custom.css 文件里这样就可以引入字体了。font-face { font-family: BailuFeiYun; src: url(/fonts/BailuFeiYu.ttf) format(truetype); font-weight: normal; font-style: normal; font-display: swap; /* 关键防止闪烁先显示后备字体 */ }记得在_config.anzhiyu.yml 文件里加上 custom.css并且设置一下 “# Global font settings” 那部分。link relstylesheet href/css/custom.css最后一步就是清理缓存然后重新生成就行了。hexo clean hexo generatetff 转换 woff2.ttf 字体文件有时候会很大这样会让网站加载变慢。为了解决这个问题你可以把.ttf 文件转换成.woff2 格式这种格式的文件更小加载更快。你可以在一些免费的在线网站上完成这个转换。TTF to WOFF2 | CloudConvert记得改一下这里的代码。font-face { font-family: BailuFeiYun; src: url(/fonts/BailuFeiYu.woff2) format(woff2), url(/fonts/BailuFeiYun.ttf) format(truetype); font-weight: normal; font-style: normal; font-display: swap; /* 关键防止闪烁先显示后备字体 */ }字体压缩如果你引用了 *.woff2 格式的字体文件但网站加载还是很慢那可能就得考虑压缩字体了 —— 可以用字蛛font-spider这个工具。1、安装字蛛# 全局安装 npm install font-spider -g # 验证安装 font-spider --version2、准备工作目录# 创建工作目录 mkdir font-spider-work cd font-spider-work # 创建必要文件 touch index.html mkdir -p source/fonts # 放入原字体 cp /source/fonts/BailuFeiYun.ttf source/fonts/3、建一个 index.html 文件在里面放上你博客要用的所有字体。!DOCTYPE html html head meta charsetUTF-8 titleFont Spider/title style font-face { font-family: BailuFeiYun; src: url(../source/fonts/BailuFeiYun.ttf) format(truetype); font-weight: normal; font-style: normal; } .font-test { font-family: BailuFeiYun; font-size: 16px; line-height: 1.8; } /style /head body div classfont-test !-- 把你博客的所有文字放这里 -- 首页文章归档分类标签友链关于技术分享HexoWordPress建站心路上一篇下一篇打赏作者复制链接猫笔千锤岁月长啃文万遍见真功 !-- 继续添加更多文字... -- !-- 常用标点符号 -- 。、《》【】… — · !-- 常用英文和数字 -- abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !-- 你的博客标题/昵称如果有特殊字 -- 安知鱼白路飞云手写体博客笔记技术生活随笔 !-- 从你的文章提取的高频文字复制几篇文章的标题和摘要 -- !-- 这里粘贴你几篇文章的标题和内容中的汉字 -- /div /body /html4、执行压缩font-spider index.html最后只需要在 custom.css 文件里加入压缩后的字体就行了。压缩脚本#!/usr/bin/env python3 # -*- coding: utf-8 -*- Hexo 博客字体压缩脚本 - 极简版只扫描实际内容其他用固定字符覆盖 import os import re import sys def extract_hanzi_from_file(filepath): 从文件提取所有汉字 try: with open(filepath, r, encodingutf-8, errorsignore) as f: content f.read() # 只匹配常用汉字 hanzi re.findall(r[\u4e00-\u9fa5], content) return set(hanzi) except Exception as e: print(f读取文件失败 {filepath}: {e}) return set() def extract_from_directory(directory, extensions[.md], skip_dirsNone): 遍历目录提取所有汉字 if skip_dirs is None: skip_dirs [node_modules, .git, public, .deploy_git, dist, build] all_chars set() file_count 0 for root, dirs, files in os.walk(directory): dirs[:] [d for d in dirs if d not in skip_dirs] for file in files: if any(file.endswith(ext) for ext in extensions): filepath os.path.join(root, file) chars extract_hanzi_from_file(filepath) all_chars.update(chars) file_count 1 print(f 扫描了 {file_count} 个文件提取 {len(all_chars)} 个独特汉字) return all_chars def get_fixed_chars(): 精简固定字符 - 覆盖所有通用词汇 # 导航菜单来自主题语言文件 nav 首页归档标签分类关于友链留言搜索文章目录阅读评论分享点赞上一篇下一篇返回顶部加载更多没有更多文章了复制成功打赏支付宝微信年月日时分秒前后发表更新字数阅读时长分钟浏览次热门最新随机最热 # 你的站点专属来自配置和页面 # 站点标题、副标题、描述等 site 安知鱼白路飞云手写体博客笔记技术生活随笔我亦无他唯手熟尔拾建站蓝桉升级订阅自研视频简码插入添代码启动网站报错怎处理浪漫插件朋友圈追番页面相册集闲言碎语随便逛逛专修叫认识你感受路漫漫其修远兮吾将上下而求索创造表演门触宅冲突部落周杰伦邓紫棋华科技电脑硬件欣赏音乐推荐服务条款隐私政策即刻短文协议导航服务匿名偏好游戏爱住市数码科技热心帮助专修交互爱好智能家居团队壮汉狠话脚踏实地 # 统计页面charts charts 统计文章发布统计图日期文章篇数平均值标签统计图分类统计图 # 友链页面link links 友情链接友链交换申请友链本站信息友链名头像地址描述提交申请 # 关于页面about about 关于我个人介绍联系方式技能栈工作经历项目经验 # 相册/追番 album 相册照片集追番番剧动漫观看中已看完想看评分 # 即刻短文essay essay 即刻短文说说语录动态时光机 # 安知鱼主题特有 anzhiyu 文章置顶推荐热门标签最新文章音乐胶囊 # 服务条款/隐私政策agreement/privacy legal 服务条款隐私政策协议用户注册登录密码邮箱账号注销数据保护Cookie使用条款 # 常用标点 punctuation 。、《》【】…—·「」『』 # 英文数字 english abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 # 常用符号 symbols ©®™℗§¶•◆◇○●★☆■□▲△▼▽→←↑↓↔↕✓✔✗✘♡♥ return nav site charts links about album essay anzhiyu legal punctuation english symbols def generate_char_file(output_path, hexo_root): 生成字符文件 print( * 60) print(Hexo 博客字体压缩工具 - 极简版) print( * 60) chars set() # 1. 只扫描文章核心内容 posts_dir os.path.join(hexo_root, source, _posts) if os.path.exists(posts_dir): print(f\n 扫描文章目录: {posts_dir}) post_chars extract_from_directory(posts_dir, [.md]) chars.update(post_chars) # 2. 只扫描页面自定义内容 source_dir os.path.join(hexo_root, source) if os.path.exists(source_dir): print(f\n 扫描页面目录: {source_dir}) page_chars set() for item in os.listdir(source_dir): item_path os.path.join(source_dir, item) # 跳过静态资源和特殊目录 if item in [images, img, fonts, css, js, cdn, assets, _posts, _data]: continue if os.path.isdir(item_path) and not item.startswith(_): print(f 发现页面: {item}) chars_in_dir extract_from_directory(item_path, [.md]) page_chars.update(chars_in_dir) elif item.endswith(.md): print(f 发现独立页面: {item}) chars_in_file extract_hanzi_from_file(item_path) page_chars.update(chars_in_file) chars.update(page_chars) print(f 页面共提取 {len(page_chars)} 个独特汉字) # 3. 添加固定字符覆盖所有通用词汇 print(f\n 添加固定字符覆盖导航、配置、主题UI...) fixed get_fixed_chars() chars.update(fixed) # 4. 排序并保存 sorted_chars .join(sorted(chars)) with open(output_path, w, encodingutf-8) as f: f.write(sorted_chars) print(f\n * 60) print(f✅ 共收集 {len(chars)} 个独特字符) print(f 已保存到: {output_path}) # 显示统计 print(f\n 字符来源分析:) print(f - 文章和页面内容: ~{len(chars) - len(fixed)} 个) print(f - 固定字符覆盖: {len(fixed)} 个) preview sorted_chars[:100] print(f\n 字符预览: {preview}...) return sorted_chars def subset_font(input_font, output_font, chars_file): 使用 fonttools 子集化字体 try: from fontTools.subset import main as subset_main except ImportError: print(\n❌ 缺少 fonttools正在安装...) os.system(f{sys.executable} -m pip install fonttools brotli zopfli) from fontTools.subset import main as subset_main print(f\n 开始压缩字体...) print(f 输入: {input_font}) print(f 输出: {output_font}) args [ input_font, f--text-file{chars_file}, f--output-file{output_font}, --flavorwoff2, --desubroutinize, --recalc-bounds, --canonical-order, --layout-features*, ] ttf_output output_font.replace(.woff2, .ttf) args_ttf [ input_font, f--text-file{chars_file}, f--output-file{ttf_output}, --desubroutinize, --recalc-bounds, ] try: subset_main(args) subset_main(args_ttf) original_size os.path.getsize(input_font) woff2_size os.path.getsize(output_font) ttf_size os.path.getsize(ttf_output) print(f\n✅ 压缩完成!) print(f 原始大小: {original_size/1024:.2f} KB) print(f WOFF2 大小: {woff2_size/1024:.2f} KB (压缩率: {woff2_size/original_size*100:.1f}%)) print(f TTF 大小: {ttf_size/1024:.2f} KB (压缩率: {ttf_size/original_size*100:.1f}%)) return True except Exception as e: print(f\n❌ 压缩失败: {e}) return False def main(): 主函数 HEXO_ROOT /www/wwwroot/myblog WORK_DIR /www/wwwroot/myblog/font-spider-work INPUT_FONT os.path.join(WORK_DIR, fonts, BailuFeiYun.ttf) CHARS_FILE os.path.join(WORK_DIR, chars.txt) OUTPUT_WOFF2 os.path.join(HEXO_ROOT, source, fonts, BailuFeiYun.woff2) if not os.path.exists(INPUT_FONT): print(f❌ 未找到原始字体: {INPUT_FONT}) sys.exit(1) os.makedirs(os.path.dirname(OUTPUT_WOFF2), exist_okTrue) chars generate_char_file(CHARS_FILE, HEXO_ROOT) if len(chars) 100: print(⚠️ 提取字符过少请检查路径) sys.exit(1) success subset_font(INPUT_FONT, OUTPUT_WOFF2, CHARS_FILE) if success: print(f\n 全部完成!) print(f 压缩后的字体已输出到: {os.path.dirname(OUTPUT_WOFF2)}) else: sys.exit(1) if __name__ __main__: main()脚本中的字体名称和路径清自行调整