深圳福田网站制作,了解网站开发 后台流程,网上学设计哪个网站好,个人如何申请网址Github 博客搭建
准备工作
准备一个 github 账号#xff1b;建立 github 仓库#xff0c;仓库名为 username.github.io#xff0c;同时设置仓库为 public#xff1b;clone 仓库#xff0c;写入一个 index.html 文件#xff0c;推送到仓库#xff08;许多网上的教程会有…Github 博客搭建
准备工作
准备一个 github 账号建立 github 仓库仓库名为 username.github.io同时设置仓库为 publicclone 仓库写入一个 index.html 文件推送到仓库许多网上的教程会有 choose theme但是新版本的 github 没有这个东西浏览器输入 https://username.github.io 访问 Note: 刚开 push 代码之后可能需要等一会才能响应内容。 关于 Github Pages 的一些设置在 repo - setting - Pages 中例如绑定域名选择构建分支等一般默认即可 进阶设置 通过之前的步骤相信你已经可以访问到你的 blog 了当然页面非常 丑 安装 node 百度安装安装 git
1. 安装 hexo
# 全局安装推荐全局
npm install hexo -g
# 局部安装
npm install hexo# 任意目录建立文件夹
mkdir blog cd blog# 初始化 Hexo 项目
hexo init# 以本地服务的形式启动 hexo 控制台会显示访问地址当然也非常丑
hexo server / hexo s2. 安装 Fluid 主题 下载最新的 Fluid Release 版本。github repohttps://github.com/fluid-dev/hexo-theme-fluid/releases 解压到 hexo 的 theme 文件夹下并重命名为 fluid 覆盖配置文件 # 复制 /themes/fluid/_config.yml 到根目录下并重命名为 _config.fluid.yml修改 hexo 根目录下的 _config.yaml 文件 theme: fluid # 指定主题
language: zh-CN # 指定语言会影响主题显示的语言按需修改 (不需要重写前面有搜索找到修改即可)创建关于页 # 命令
hexo new page about# 创建成功后修改 /source/about/index.html添加 layout 属性
---
title: about
date: 2020-02-23 19:20:33
layout: about
---这里写关于页的正文支持 Markdown, HTML重新启动 hexo server不出意外修改主题之后的 blog 已经显示成功了
3. 创建文章 如下修改 Hexo 博客目录中的 _config.yml打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。 网上这么说的本人测试无效图片文件放在 themes\fluid\source\img 路径才能访问到 post_asset_folder: true执行如下命令创建一篇新文章名为 test 文章名可以为中文多个单词组成用引号引起来 hexo new post test在 source/_post/test 中放一张图片之后修改 test.md 文章内容如下 参考第一步中的加粗内容 ---
title: 测试文章
date: 2023-08-23 21.24:35:20
# 文章首页封面图
index_img: /img/bgc.jpg
# 文章页顶部大图
banner_img: /img/bgc.jpg
tags:
- 原创
categories:
- test
---这是一篇测试文章[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a7Swb4kJ-1692864224097)(/img/bgc.jpg)]便签
p classnote note-primary标签/p
p classnote note-success标签/p
p classnote note-warning标签/p
p classnote note-info标签/p行内标签
span classlabel label-primaryLabel/span
span classlabel label-successLabel/span按钮
a classbtn hrefurl titletitletext/a启动并访问 # 生成 public 文件夹
hexo g# 以本地服务形式启动
hexo server4. 个性化定制 浏览器标签页名称 # 修改根目录下 _config.yml 中的 title 字段。
# Site
title: Yuluos blog博客标题 # 修改根目录下的 _config.fluid.yml 中的 blog_title 字段。
navbar:blog_title: Yuluos blog主页正中间的文字 # 修改根目录下的 _config.fluid.yml 中的 text 字段。
slogan:enable: true# 为空则按 hexo config.subtitle 显示# If empty, text based on subtitle in hexo configtext: 芝兰生于空谷不以无人而不芳!其他配置均可在 _config.fluid.yml 查看进行个性化修改。 # 例如其他 navbar 的背景大图及其他设置 Line 930
#---------------------------
# 标签页
# Tag Page
#---------------------------
tag:enable: truebanner_img: /img/default.pngbanner_img_height: 80banner_mask_alpha: 0.3tagcloud:min_font: 15max_font: 30unit: pxstart_color: #BBBBEEend_color: #337ab7# 用于浏览器标签的图标 line 19
# Icon for browser tab
favicon: /img/fluid.png关于页的图标设置 地址https://hexo.fluid-dev.com/docs/icon/#%E5%86%85%E7%BD%AE%E7%A4%BE%E4%BA%A4%E5%9B%BE%E6%A0%87 # line960 找到 icon 的名字替换即可
- { class: iconfont icon-github-fill, link: https://github.com, tip: GitHub }
- { class: iconfont icon-douban-fill, link: https://douban.com, tip: 豆瓣 }
- { class: iconfont icon-wechat-fill, qrcode: /img/favicon.png }文章中底部的作者和连接修改 # 根目录下的 _config.yml 配置中分别搜索 url 和 author# 文章作者 line 10
keywords:
author: yulu# URL line 16
## Set your site url here. For example, if you use GitHub Page, set url as https://username.github.io/project
url: http://yuluo-yx.github.i部署到 github pages
有多种方式这里选择较为简单的一种 推送根目录下的 public 目录到 github 仓库中访问即可 如果没有public运行 hexo g 生成即可push 上去等待一会刷新查看效果 最后放上我的 blog 连接:欢迎大家访问https://yuluo-yx.github.io
