如何搭建自己的博客

2024-09-21T19:11:45+08:00 | 3 分钟阅读 | 更新于 2024-09-21T19:11:45+08:00

Pepper

Hugo简介

Hugo建站优点

超高速的生成速度

快速构建：Hugo 能在几秒钟内生成上千个页面，大大提高了开发效率。
即时预览：内置的开发服务器支持实时预览，更改内容后页面立即刷新。

简单易用

易于安装：无需复杂的依赖环境，下载即可使用。

易于配置：配置文件简单明了，支持 YAML、TOML 和 JSON 格式。

灵活的内容管理

支持多种格式：可使用 Markdown、HTML 等格式撰写内容。
强大的模板引擎：使用 Go 语言模板，支持复杂的模板定制。
多语言支持：内置国际化功能，方便创建多语言站点。

静态网站优势

安全性高：纯静态文件，无需数据库，减少安全漏洞。
部署方便：可部署到任意支持静态文件的服务器或平台，如 GitHub Pages、Netlify 等。
性能优秀：页面加载速度快，用户体验佳。

Hugo建站步骤

步骤 1：安装 Hugo

macOS（使用 Homebrew）
  brew install hugo

步骤 2：创建新站点

  hugo new site myblog

步骤 3：选择并安装主题

  cd myblog

创建 themes 文件夹（如果不存在）：

  mkdir themes

克隆主题仓库（以dream主题为例）：

  git clone https://github.com/g1eny0ung/hugo-theme-dream.git

部署

分离发布和开发：

分离管理：将public目录作为子模块，意味着您可以将内容管理和静态站点托管分离开来。public仓库只负责托管生成的静态文件，而主仓库则用于存储Hugo站点源文件。
便于协作：子模块允许团队成员分别在不同的仓库中工作。例如，一个人负责站点内容更新，另一个人负责站点的部署。每个模块仓库可以独立管理。
便于管理和维护：当更新了博客内容时，只需重新生成public目录的静态文件，并将其推送到子模块仓库。这样，主仓库和发布仓库可以分别独立更新和管理。

连接Github

创建 GitHub 仓库：

登录 GitHub。
点击右上角的 + 号并选择 New repository。
设置仓库名称，例如 my-hugo-site。
选择 Public 作为可见性。
点击 Create repository。

SSH的生成和连接

初始化 Git 仓库：进入新创建的 Hugo 项目目录，初始化 Git 仓库

  cd myblog
  git init

连接 GitHub 仓库：在本地仓库中设置远程仓库，将仓库链接到 GitHub

  git remote add origin https://github.com/your-username/myblog.git

提交站点文件

将所有项目文件添加到 Git 暂存区
  git add .
提交更改
  git commit -m "Initial commit"
推送到 GitHub： 将代码推送到 GitHub 仓库
  git push -u origin main

托管静态文件

将public文件夹分支存放到git里单独托管，这样只用管理静态文件

将public目录作为Submodule部署

创建一个单独的仓库用于部署静态文件：在GitHub上创建另一个仓库，例如my-hugo-site-public，用于托管生成的静态文件。
将public目录作为Git子模块：回到本地Hugo项目目录，将public目录添加为Git子模块

  git submodule add https://github.com/your-username/my-hugo-site-public.git public

提交子模块设置：提交子模块的引用到主仓库中

  git add .gitmodules public
  git commit -m "Add public as a submodule"
  git push

git部署推送

生成站点：每次更新博客后，运行以下命令生成最新的静态文件

  hugo

提交并推送静态文件到public仓库：进入public目录，将生成的静态文件推送到public仓库

  cd public
  git add .
  git commit -m "Update public site"
  git push origin main

博客美化

图片引用

1. 在content中建立post页面单独的文件夹，存放对应图片，直接引用
<img src='如何搭建自己的博客.jpg' alt="sym" width="100%">
2. 在static文件中存放的文件，引用代码
<img style="border:1px solid black" src="/me.jpg" align="center" width="600" height="300"/>
<img src="/images/background.jpg" alt="xxx" width="50%" />

上一页 David baker蛋白质设计方法

下一页 GPCR概览