Hugo 是一款快速搭建网站的主题框架,相对于 Hexo 来说, Hugo 的主题以及性能更加出色,并且类型上更加多元化,下面我们试着用 Hugo 来搭建网站。详情可以去 Hugo官网 查看.

Hugo 是一个用 Go 语言编写的静态网站生成器。

在 Windows 上安装 Hugo

Windows 上需要先安装包管理工具,这样再安装 Hugo 就会节省很多时间,这里有两种方式来让你安装包管理工具。

第一种方法:Chocolatey 包管理安装

  • 首先利用 PowerShell 打开,运行

Set-ExecutionPolicy Bypass -Scope Process -Force

如果有权限提示,输入 Y,

  • 接着输入这一串
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
复制代码
  • 成功后输入 choco install hugo -confirm 安装 Hugo,即可开始安装。另外需要主要的是,如果等待很久还没有出现安装成功的提示,那这个就要考虑是否已经翻墙,翻墙的更容易安装上?

第二种方法:Scoop 包管理安装

  • 打开 PowerShell ,输入

iex(new-object net.webclient).downloadstring(' https://get.scoop.sh ')

  • 安装成功后输入scoop install hugo

接下来跟着下面步骤即可

在 Mac上安装

在 Mac 上安装也需要先安装包管理工具,我们假设已经安装了 brew ,接着开始安装 Hugo

第1步:安装 Hugo

brew install hugo

安装完成后,我们看一下当前版本,如果出来版本,说明我们已经安装成功了:

hugo version

第2步:创建一个新网站

选择一个在你要存放网站的地方,创建文件夹名为 xxx 的网站,然后在当前文件夹内执行:

hugo new site xxx

创建的站点文件目录说明:

|- archetypes :存放default.md,头文件格式

|- content :content目录存放博客文章(.markdown/.md文件)

|- data :存放自定义模版,导入的toml文件(或json,yaml)

|- layouts :layouts目录存放的是网站的模板文件

|- static :static目录存放js/css/img等静态资源

|- config.toml :config.toml是网站的配置文件

这个时候,创建出来的网站是没有任何内容的,需要下载个主题跑起来才有内容。

第3步:添加主题

这里有各种各样的主题包:themes.gohugo.io,选上一种进行下一步

cd xxx

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

注意:有些主题步骤会跟上面不一致,可以直接到该主题下按照步骤操作即可

第4步:添加一些内容

下载好之后,现在还没有文章,我们来写一篇文章:

hugo new posts/my-first-post.md

这样就会在posts目录下生成一个markdown的文件,用markdown工具打开编辑内容即可。

现在启动Hugo本地服务器 在xxx目录下: hugo server -t 主题名字

出现

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop

说明已经成功。打开浏览器输入http://localhost:1313看一看预览效果。

第五步 上传到github

这个时候本地网址已经搭建好了,可以上传到github上。

  • 在xxx目录下,如果已经有public文件夹,则删除:`rm -rf public完全删除该public目录

  • clone 仓库: git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public 出现 Not a git repository 提示的话,是因为没有.git这样一个目录,创建一个即可: git init

  • 在本地测试好之后: hugo --theme=xxx --baseUrl="https://xxx.github.io/"

  • 更新git

    • cd 到 public 目录,

    • git add * 全部更新

    • git commit -m "更新内容"

    • git push https://github.com/xxx/xxx.github.io.git master


注意的地方

  • 如果出现:
To https://github.com/aniruddhabarapatre/learn-rails.git
! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/aniruddhabarapatre/learn-rails.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first merge the remote changes (e.g.,
hint: 'git pull') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.复制代码

用:git push -f https://github.com/xxx/xxx.github.io.git master 强制更新

利用 GitHub 搭建独立 Web 网站相关推荐

  1. 如何利用github搭建一个个人网站

    一.Github Pages的使用 1.首先你得有一个Github账号,没有的话去github.com注册一个: 点击Sign up for Github进入注册页面 2.有了账号以后登录到Githu ...

  2. 如何利用github搭建个人主页网站?

    本章教程告诉你如何利用github搭建一个个人静态主页网站. 适合没有服务器和域名且对网站搭建感兴趣的人玩玩,github稳定性可能差一点. 目录 一.前期准备工作 二. 创建项目仓库 三.将网站上传 ...

  3. 利用Github搭建自己的图床

    MDPIC 利用Github搭建自己的图床! 简介 | English Version

  4. 实战:如何利用Github搭建自己的免费图床-20211106

    文档版本 2021年11月6日14:38:37更新:创建文档: 原文链接 https://zhuanlan.zhihu.com/p/353775844 1.前言 0.什么是图床 对于写博客的朋友们来讲 ...

  5. 如何利用Github搭建个人博客

    注: Hexo是一个快速.简洁且高效的博客框架. Hexo使用Markdown解析文章,在几秒内,即可利用靓丽的主题(如NexT)生成静态网页. ****** 特别推荐 ****** Ⅰ: 搭建指南: ...

  6. 【保姆级】利用Github搭建自己的个人博客,看完就会

    大家好,我是辰哥~ 作为一名喜欢技术的爱好者,平时喜欢把自己学习技术的心得或者一些踩坑.易错的过程记录下来,首选的是技术平台(博客),今天辰哥来教大家如何利用Github来搭建一个自己的个人博客平台. ...

  7. 一、docker容器使用以及搭建企业级web网站

    一.docker容器 docker和k8s的区别? 区别:1.k8s是一种开放源码的容器集群管理系统,而Docker是一种开放源码的应用容器引擎:2.k8s是一套自动化部署工具,可以管理docker容 ...

  8. 怎样利用github搭建个人博客

    怎样搭建博客 1. 利用GitHub Pages搭建了个人博客雏形 在github上创建一个仓库名为自己github账号的名字 eg: bingTangGithub.github.io git clo ...

  9. 使用三种方式搭建IIS web 网站

    实验环境:在Windows 2008虚拟机上安装IIS 服务 实验目的:使用三种方式搭建虚拟主机网站(一个是安装好IIS服务默认的网站,还有一个是自己搭建的网站) 1. 两个网站同一个ip,不同的端口 ...

最新文章

  1. Windows~KinectV2开发
  2. openOffice word转pdf,pdf转图片优化版
  3. [Leetcode] Simplify Path
  4. 利用多个域名来存储网站资源
  5. windows下配置Python环境并安装Pycharm2018
  6. 「mysql优化专题」高可用性、负载均衡的mysql集群解决方案(12)
  7. PHP开发环境MAMP for Windows
  8. 第2小节,深入剖析gym环境构建
  9. 长沙理工大学第十二届ACM大赛L 选择困难症 (剪枝暴搜)
  10. 案例解读|江苏银行—智多星大数据分析云平台实践
  11. win10系统自动打开代理服务器的解决方法
  12. 如何在Word中画横线?
  13. 基于STM32-蜂鸣器
  14. js字符转换成分数_JavaScript实现分数显示
  15. 王者荣耀之我的十天(教你如何10天单排上钻石)
  16. OOSE-人际关系管理系统设计开发
  17. Instagram帖子如何隐藏喜欢和查看计数?
  18. Python数据挖掘过程
  19. 618狂欢过后,冷静揭秘亚马逊和淘宝如何用算法让你剁手
  20. Windows 7单个程序音量控制

热门文章

  1. 全球及中国小水电行业投资规模及运行动态分析报告2021年版
  2. 全球与中国OLED大平板涂胶显影设备市场运营状况分析及投资前景建议报告2022-2028年版
  3. 中国油气装备行业发展状况与投资前景咨询报告2022-2028年版
  4. 大湾区菜篮子基地 谋定·农业大健康-林裕豪:从玉农业再次入选
  5. maven打war包
  6. 简单团队-爬虫豆瓣top250-项目总结
  7. 【bzoj2154】Crash的数字表格 莫比乌斯反演
  8. arcgis api 3.x for js 入门开发系列二不同地图服务展示(附源码下载)
  9. Struts流程分析+源码分析
  10. Altium Designer中将FPGA引脚定义导出成文件