① 静态网站生成工具-hugo
前段时间使用docker搭建了一个wiki的网站,用于记录日常学习中的笔记,用了一段时间,功能很强大,但是编辑器不太熟悉,网站使用java开发的,功能很全面,插件多的时候就感觉越来越臃肿。曾经有段时间就不想使用它了,最近偶然发现一个静态网站的生成工具hugo,可以将markdown直接生成网站,部署到站点上作为自己的知识库或者博客,hugo是使用go语言开发的,使用起来非常方便,生成的网站可直接部署在Nginx、IIS等中间件上面供其他人访问,hugo还有很多漂亮的主题,大家可以选择自己喜欢的进行使用,下面介绍下 我安装使用hugo的经历和方法。
1)使用brew install命令安装
我的电脑是mac的,所以最方便的是直接用brew install hugo命令安装最为方便:
执行安装完成后执行hugo version 命令查看版本,确保安装成功
2)官网下载二进制包:解压后将二进制文件加入环境变量的方式安装。大家可以根据自己的操作系统,下载适合的安装包。
3)也可以下载源码 编译 运行,由于我本地的go版本是1.17的,而hugo的最新代码的最低要求是1.18,暂时还不想升级,所以源码编译的方式这里就不过多介绍,感兴趣让差铅的可以下坦好载源码编译试试。
进入要创建网站的目录庆核,执行一下命令
这样名称为test-blog的网站就建好了 ,
下载一个主题 可以在 官网上找到各种各样的主题
将主体添加至配置文件
打开content/posts目录下的index.md 文件进行编辑,页面的配置项说明参见官网
执行下面命令
成功以后就可以访问http://localhost:1313/就可以访问网站了。
执行命令hugo -D 即可生成一个public的文件夹,其下面的内容即为静态网站的所有文件
这里使用nginx的docker镜像 进行部署,执行以下命令:
执行成功后就能通过http:localhost访问到静态网站了。
这个工具还有很多需要研究的地方,这里只是将简单的使用方法记录了一下,以后怎样使用才能使网站更加的方便,快捷、美观,还要花时间研究。有兴趣的小伙伴可以私信我一块研究。
② CODING 静态网站
在 cong.net 部署静态博客,跟 github 是不一样的,这里简单记录一下。丛销桐以谢益辉的 hugo-xmag 博客主题为例。
在导航栏的 “ 构建与部署 ” 中选择 “ 静态网站 ”,点击“ 直接发布静态网站 ”。
填写网站名称,然后 " 保存 "。
" 保存 " 后,在部署页面点击 " 立即部署 "。
部署成功后,通过访问地址可以打开静态的网站。
在项目导航栏 "构建与部署" → "静态网站" 页面,点击右上角的 "设置" 按钮。
在 "设置" 页面,填写需要绑定的域名,并选择强制 https 访问。
在域名解析中添加一条渗坦 CNAME 记录。
域名解析 CNAME 添加后,等待几分钟,直至证书状态为“正常”。如果证书状态失败,检查你的 CNAME 记录,并再尝试多重新申斗悉请几次。
最后,通过域名访问,一切正常。
③ 使用Nginx搭建静态网站
开始建站了,暂时还没想要做些什么东西。
Anyway,先搞个云服务器吧,那要怎么搭建呢?先来个最简单的。
Nginx 配置文件目录一般在 /etc/nginx/ 下,打开 nginx.conf 文件可以看到配置:
当外网用户访问服务器 Web 服务由 Nginx 提供,Nginx 需要配置静态资源的路径信息才能通过 URL 正确访问到服务器上的静态资源。
当我们在服务器上安装并启动 Nginx 之后,就可宏枝以通过 http://<域名或IP> 访问我们的网页了。所以,在浏览器中输入 http://100.2.3.4 即可。
我们观察到浏览器的地址变成了 http://100.2.3.4/index.html ,这页面是安装 Nginx 的默认站点,可以在 /usr/share/nginx/html 目录下找到。在 nginx.conf 配置文件中,有一项 root /usr/share/nginx/html 的配置,意思是当外网访问服务器 跟目录 时,Nginx 会将资源指向 /usr/share/nginx/html 的站点。
但如果输入地址,无法打开(如下截图)。
以阿里云为例,需要在云服务器添加 “安全组规则” ,添加并保存,重新刷新页面就能打开了。
我习惯将前端静态资源滚绝兄放置到服务器的 /data/www 下,因此将配置修改为 root /data/www 。此时访问 http://100.2.3.4 会指向 /data/www/index.html (在不配置 location 的 index 情况下,Nginx 默认配置是 index.html )。
由于我使用的是 Mac 机器,因此可以直接在系统终端使用 scp 命令将本地文件上传到云服务器。
scp (secure )用于在 Linux 下进行远程拷贝文件的命令。大袭类似于 cp ,只不过 cp 只能在本机进行拷贝,不能跨服务器。 -r 表示递归复制整个目录。
需要注意一下,下面两种的区别:
其中 1️⃣ 得到的是 /data/www/dist ,而 2️⃣ 得到的是 /data/www 。前者表示将 dist 整个目录拷贝至 /data/www 下。后者是把 dist 目录下的所有子文件和子目录都拷贝至 /data/www 。
换句话说就是,前者配置 root 的路径应该是 /data/www/dist ,后者则为 /data/www 。
效果如下:
在浏览器中访问 http://100.2.3.4 即可看到我们配置的网页了。
最简单的 Nginx 部署静态网页就完了,其他的下次再讲...
The end.