… кроме github.

Я не указал в заголовке язык, который мы будем использовать, потому что на данный момент я собираюсь использовать правильный инструмент. Правильный инструмент — это .NET, а точнее, F#.

Требуется .NET SDK.

Итак, это краткое пошаговое руководство.

1. Создайте репозиторий на github.com.

Здесь все просто. Я создам репозиторий с некоторым списком репозиториев.

2. Клонируйте его локально

Я открою свой любимый терминал и наберу

git clone https://github.com/WhiteBlackGoose/MyFunRepos
cd MyFunRepos

3. Инициализация проекта

dotnet new console -n WebsiteGenerator -lang F#
cd WebsiteGenerator
dotnet add package Giraffe.ViewEngine --prerelease

Это создаст вам проект на F#! Также добавляется пакет, позволяющий создавать html-теги прямо в коде. Скоро об этом.

4. Открываем проект

Мы создаем что-то очень простое, поэтому вы можете либо открыть Program.fs с помощью вашего любимого текстового редактора, либо просто открыть файл fsproj с помощью IDE.

Я собираюсь использовать для этого nvim.

5. Создайте свою первую веб-страницу

Давайте создадим пустую html-страницу с заголовком и произвольным текстом.

open Giraffe.ViewEngine


html [] [
    body [] [
        h1 [] [ Text "Hello, world" ]
        p [] [
            Text "Some text"
        ]
    ]
]
|> RenderView.AsString.htmlNode
|> fun code -> System.IO.File.WriteAllText("./index.html",  code)

Вполне читабельно, правда? Давайте запустим ее!

dotnet run
firefox index.html

Если у вас нет firefox, вы можете попробовать

xdg-open index.html  # linux
start index.html     # windows

или просто откройте html-страницу из проводника файлов!

У меня работает:

6. Добавьте на нее данные

Вы могли бы сделать эту страницу с помощью простого html. Зачем вам для этого нужен F#?

Хорошо, давайте усложним историю. На этот раз мы добавим список данных и некоторое условие.

open Giraffe.ViewEngine

type Repo = {
    name : string
    lang : string
}

let myFunReposList = [
    { name = "MyFunRepos";             lang = "F#" }
    { name = "FStarHelloWorld";        lang = "F*" }
    { name = "LambdaCalculusFSharp";   lang = "F#" }
    { name = "AsmToDelegate";          lang = "C#" }
]

html [] [
    body [] [
        h1 [] [ Text "My Fun Repos" ]
        ul [] [
            for { name = name; lang = lang } in myFunReposList do
                li [] [
                    p [] [ Text $"Repo {name}" ]
                    a [_href $"https://github.com/WhiteBlackGoose/{name}"] [ Text name ]
                    p [] [
                        Text "Made in "
                        if lang = "F#" || lang = "C#" then
                            Text $".NET {lang}"
                        else
                            Text lang
                    ]
                ]
        ]        
    ]
]
|> RenderView.AsString.htmlNode
|> fun code -> System.IO.File.WriteAllText("./index.html",  code)

Хорошо, что мы здесь делаем? Мы создали запись Repo, которая имеет два поля (для простоты). Затем я создаю список моих репо, желая использовать эти поля.

Здесь нет конкатенации строк и никакого ада со скобками. У нас даже нет запятых в конце каждой строки.

Теперь самая интересная часть. Видите, я вставляю обычный цикл for прямо в элемент ul! Я не создаю его в отдельной переменной или функции или еще где-нибудь, я просто пишу его внутри тега hmtl. Как будто это какой-то шаблонизатор, но это не так, это обычный язык.

Я даже вставил туда условие if, которое тоже читается очень хорошо!

Давайте посмотрим, что мы получили в результате:

Это создало простую html-страницу. Вот и все. Никакого шаблонизатора. Этот код написан на одном языке программирования, и вы можете его отлаживать. Вы полностью контролируете ситуацию!

7. Автоматическое создание сайта

Хорошо, мы создали html-страницу. Но это еще не веб-сайт. Мы хотим, чтобы наш сайт автоматически публиковался при каждом толчке. Поэтому давайте напишем наш рабочий процесс Github Actions.

name: Website publish

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    - name: Setup .NET 6
      uses: actions/setup-dotnet@v1
      with:
        dotnet-version: '6.0.x'

    - name: Run generator
      run: |
        mkdir generated && cd generated
        dotnet run --project ../WebsiteGenerator/WebsiteGenerator.fsproj

    - name: Push to gh-pages
      uses: JamesIves/github-pages-deploy-action@4.1.4
      with:
        branch: gh-pages
        folder: ./generated

Файл вполне читабелен сам по себе. Мы устанавливаем .NET SDK, затем запускаем наш генератор из определенной папки, а затем просто заталкиваем папку в ветку gh-pages! Вот и все.

8. Активируйте Pages

1. Перейдите в настройки вашего репозитория
2. Перейдите в раздел Pages
3. Выберите gh-pages в качестве исходной ветви
4. Нажмите Сохранить

9. Наслаждайтесь результатом!

Мой url выглядит так: whiteblackgoose.github.io/MyFunRepos/.

Теперь я могу легко добавить контент на страницу или создать много страниц, а также добавить некоторые данные, возможно, даже загрузить набор данных и затем отобразить его.

Резюме

Мы создали простой статический веб-сайт на F#! Вот основные особенности этой установки:

• Вы имеете полный контроль над ним. Не использовался генератор статических сайтов
• Синтаксис F# здесь действительно удобен. Вы можете вставлять циклы, условия и некоторые другие конструкции потока управления прямо в страницу!
• Бесплатный хостинг и бесплатный домен по умолчанию (но вы можете установить свой собственный домен, если хотите)
• Настройка занимает 5-30 минут

Спасибо за внимание! Мой github, twitter.

Источники