利用Flutter做成应用1:环境

在Windows上搭建Flutter开发环境

如果访问Flutter受到限制,在环境变量中加入下面的变量

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

安装Git命令行工具 Git for Windows

获取Flutter SDK

下载
https://docs.flutter.dev/development/tools/sdk/releases https://flutter.cn/docs/development/tools/sdk/releases

将安装包zip解压到你想安装Flutter SDK的路径,在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter控制台。 如果用cmd启动控制台,需要将flutter\bin对应路径添加到环境变量Path中。

Flutter有三个发布渠道,分别为stable、beta 和 master。 如果已经装好Flutter需要升级的话,使用如下命令。

flutter channel stable
flutter upgrade

如果需要更新pubspec.yaml文件里列出的所有依赖的packages,使用如下命令。

Hugo网站搭建7:发布

网站做好后,需要发布到网络上,github和gitlab都提供了免费的Pages功能。

github的Pages功能:

  • 项目必须是公开属性
  • 必须上传hugo编译后的网站文件

gitlab的Pages功能:

  • 项目可以是私有
  • 可以上传hugo网站原始文件,gitlab提供了自动编译功能。

本网站选用gitlab的Pages。

https://gitlab.com/

新建一个项目,项目名必须为【用户名.gitlab.io】。 将hugo文件提交到项目后,配置CI/CD自动构建脚本,如果新建项目时选的是hugo项目,该脚本会自动生成。

# All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

test:
  script:
  - hugo
  except:
  - master

pages:
  script:
  - hugo
  artifacts:
    paths:
    - public
  only:
  - master

每次提交代码到gitlab后,该流水线会自动执行,运行hugo生成网站文件。

Hugo网站搭建6:统计

如果希望统计网站的访问量等数据,可以在网页中加入统计代码。

百度统计

https://tongji.baidu.com/web/homepage/index

在该网站注册并获取统计代码。

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?***********";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

需要将代码添加到网站全部页面的</head>标签前。因此将代码放到themes\timeline\layouts\partials\head.html中即可。

谷歌统计

https://analytics.google.com/

Hugo网站搭建5:评论

在静态网页中添加评论功能,可使用第三方评论系统。

Valine评论系统

Valine是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。

Valine详细可参见下面的网站。
https://valine.js.org/
https://github.com/xCss/Valine

注册LeanCloud账号后,登录管理界面,添加一个应用。
https://console.leancloud.app/apps
免费版提供256M容量。
在该应用的设置->应用凭证中可以找到AppID和AppKey等,用于配置文件中。

在hugo的配置文件中添加如下配置。

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
[params.valine]
  enable = true
  appId = '**********'
  appKey = '*********'
  notify = false  # mail notifier , https://github.com/xCss/Valine/wiki
  verify = false # Verification code
  avatar = 'monsterid'
  placeholder = 'Say Something...'
  visitor = true
  lang = 'en'

在需要添加评论的页面添加下面的代码,即可使用评论功能。

Hugo网站搭建4:内容

图片网页制作

图片上传到资源库后,需要制作展示图片的网页。
只需要图片网址即可展示图片。在图片很多的情况下,可通过脚本来制作展示图片的网页。

#!/usr/bin/env python
# -*- coding: utf-8 -*- #

import os
import sys
import re
import datetime
import random
import cloudinary
from cloudinary.api import delete_resources_by_tag, resources_by_tag
from cloudinary.uploader import upload, explicit
from cloudinary.utils import cloudinary_url

# 数值Cloudinary网站提供
cloudinary.config(
    cloud_name="******",
    api_key="******",
    api_secret="******"
)

OVERWRITE = False


def get_key_word():
    str_words = 'keyword'
    return str_words

def get_description():
    return 'description'

def get_title():
    return 'Beauty Illustrated Book'

def check_url(url):
    p = re.compile(r"/v\d+/")
    return p.sub(r"/", url)

def make_md_file(out_folder):
    begin = datetime.datetime(2021, 8, 1)
    start_id = 1

    while True:
        str_date = begin + datetime.timedelta(days=start_id-1)

        img_folder = "my_blog/pages/" + str_date.strftime('%Y%m%d')
        test_img = img_folder + "/{:0>4d}".format(1)
        try:
            res = explicit(
                test_img,
                type='upload'
            )
        except Exception as ex:
            break
        else:
            # print(img_folder)
            md_file = out_folder + "{id}.md".format(id=start_id)

            if not OVERWRITE:
                if os.path.exists(md_file):
                    print(md_file + " is exists, passed")
                    start_id = start_id + 1
                    continue

            img_list = []
            thumb_img = ""
            not_found = 0
            for pid in range(1, 100):
                sid = img_folder + "/{:0>4d}".format(pid)
                try:
                    res = explicit(
                        sid,
                        type='upload'
                    )
                except Exception as ex:
                    print(ex)
                    not_found = not_found + 1
                else:
                    url = check_url(res['url'])
                    print(url)
                    img_list.append(url)
                    if pid == 1:
                        thumb_img = cloudinary.CloudinaryImage(res['public_id']) \
                            .build_url(width=300, height=150, gravity="faces", radius='10',  # effect='cartoonify',
                                       crop="fill")
                        thumb_cartoon_img = cloudinary.CloudinaryImage(res['public_id']) \
                            .build_url(width=300, height=150, gravity="faces", radius='10', effect='cartoonify',
                                       crop="fill")

                pid = pid + 1
                if not_found > 3:
                    break

            if len(img_list) > 1:
                with open(md_file, 'w', encoding='utf-8') as f:
                    f.write('---\n')
                    s_date = str_date.strftime('%Y-%m-%d %H:%M:%S')
                    s_pub_date = str_date.strftime('%Y-%m-%d')
                    f.write('date: {0}\n'.format(s_date))
                    f.write('publishdate: {0}\n'.format(s_pub_date))
                    f.write('title: \"{0}\"\n'.format(get_title()))
                    f.write('keywords: \"{0}\"\n'.format(get_key_word()))
                    f.write('description: \"{0}\"\n'.format(get_description()))
                    f.write('weight: {0}\n'.format(start_id))
                    f.write('thumb: \"{0}\"\n'.format(thumb_img))
                    f.write('thumbCartoon: \"{0}\"\n'.format(thumb_cartoon_img))
                    f.write('---\n\n')

                    for img_url in img_list:
                        f.write('![]({url})\n'.format(url=img_url))
                        if img_url != img_list[-1]:
                            f.write('\n---\n\n')

            start_id = start_id + 1


if __name__ == '__main__':
    out_folder = r'./content/pages/'
    make_md_file(out_folder)

通过本脚本,可以制作Markdown文件放入content文件夹下。再通过hugo编译生成展示图片的网页。

Hugo网站搭建3:图片

图片存储

本网站主要展示图片,因此需要将图片存储到网络上。
对于个人网站,最好挑选一个免费的图片空间。
经过挑选,这里使用Cloudinary网站。
该网站提供25Credit免费使用量。如果访问量大,也可升级收费版本。

1 Credit =
 1,000 Transformations OR
 1 GB Storage OR
 1 GB Image Bandwidth OR
 2 GB Video Bandwidth

如需申请,请点击Cloudinary

Hugo网站搭建2:主题

安装主题

可从该网站选择合适的主题。
https://themes.gohugo.io/

本网站使用下面的主题
https://themes.gohugo.io/themes/hugo-theme-timeline/

将下载后的主题文件夹放到自己的网站目录的themes文件夹下面,主题文件中的exampleSite是主题提供的示例网站,可删除。

设置网站配置文件config.toml中的主题

theme = "timeline"

themes文件夹下面可放置不同的主题,在配置中设置当前使用的主题即可。只有配置中设置的主题起作用。

此时所有的板块将使用该主题。由于hugo只能使用一个主题,如果在某一板块想使用别的主题layout,可以在layouts文件夹下定义该板块的layout模板文件。

如本网站blog模块,在layouts文件夹下新建blog文件夹,在blog文件夹中新建list.html列表文件模板和single.html内容模板。

Hugo网站搭建1:环境

安装go

hugo依赖go环境,下载地址:

http://docs.studygolang.com/doc/installhttps://golang.google.cn/

安装hugo

下载地址: https://github.com/gohugoio/hugo/releases

在网站可找到两个版本
hugo_0.96.0_Windows-64bit.ziphugo_extended_0.96.0_Windows-64bit.zip

推荐使用extended版本,否则修改下载的主题有的会不起作用。

建站

  1. 生成hugo网站的基本文件。
hugo new site blog

生成的文件夹结构如下:

blog
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

archetypes

在通过hugo new xxx 创建内容页面的时候,默认情况下hugo会创建date、title等front matter,可以通过在archetypes目录下创建文件,设置自定义的front matter。