… кроме 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
- Перейдите в настройки вашего репозитория
- Перейдите в раздел Pages
- Выберите gh-pages в качестве исходной ветви
- Нажмите Сохранить
9. Наслаждайтесь результатом!
Мой url выглядит так: whiteblackgoose.github.io/MyFunRepos/.
Теперь я могу легко добавить контент на страницу или создать много страниц, а также добавить некоторые данные, возможно, даже загрузить набор данных и затем отобразить его.
Резюме
Мы создали простой статический веб-сайт на F#! Вот основные особенности этой установки:
- Вы имеете полный контроль над ним. Не использовался генератор статических сайтов
- Синтаксис F# здесь действительно удобен. Вы можете вставлять циклы, условия и некоторые другие конструкции потока управления прямо в страницу!
- Бесплатный хостинг и бесплатный домен по умолчанию (но вы можете установить свой собственный домен, если хотите)
- Настройка занимает 5-30 минут
Спасибо за внимание! Мой github, twitter.
Источники