... 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를 열거나 IDE로 fsproj 파일을 열 수 있습니다.

나는 그것을 위해 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

파이어폭스가 ​​없으시면 시도해보세요

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/[email protected]
      with:
        branch: gh-pages
        folder: ./generated

파일은 그 자체로 꽤 읽을 수 있습니다. .NET SDK를 설치한 다음 특정 폴더에서 생성기를 실행한 다음 폴더를 gh-pages 분기로 푸시합니다! 그게 다야.

8. 페이지 활성화

저장소 설정으로 이동합니다

.

페이지로 이동

gh-pages를 소스 분기로 선택

저장을 누릅니다

.

9. 결과를 즐기십시오!

내 URL은 다음과 같습니다: whiteblackgoose.github.io/MyFunRepos/ .

이제 페이지에 콘텐츠를 쉽게 추가하거나 많은 페이지를 생성할 수 있을 뿐만 아니라 일부 데이터를 추가하고 일부 데이터 집합을 다운로드한 다음 표시할 수도 있습니다.

요약

F#으로 간단한 정적 웹사이트를 만들었습니다! 이 설정의 주요 기능은 다음과 같습니다.

사용자가 완전히 제어할 수 있습니다. 정적 웹 사이트 생성기가 사용되지 않음

여기서는 F# 구문이 정말 편리합니다. 루프, 조건문 및 기타 제어 흐름 구조를 페이지에 바로 삽입할 수 있습니다!

무료 호스팅 및 무료 기본 도메인(원하는 경우 도메인을 직접 설정할 수 있음)

설정하는 데 5-30분 소요

주목 해 주셔서 감사합니다! 내github , .

Sources