WordPress에서 Hugo로 갈아타기

젠도 써보고 있어서 처음 글을 쓰게 됐어요.
Word Press에서 Hugo까지의 환차는 물론 곳곳에 있지만 의외로 다양한 모델이 있다. 아래의 모델에 대해 미리 기록을 남긴다.

WordPress to Hugo Exporter에서의 데이터 출력

주제는 "Mainroad"

입니다.

GiitHub Pages의 유형은 "GiitHub Pages 프로젝트"

입니다.

년도별로 압축 파일widget

추가
제작된 사이트는 여기 있습니다.
PROGRAMMERS OFFICE

WordPress to Hugo Exporter의 데이터 출력

모바일 소스 WordPress의 데이터 출력은 WordPress to Hug Exporter를 사용합니다.
이 자체는 플러그인을 설치한 다음 메뉴에서 선택하십시오
툴 > Export to Hugo
그런 다음 천천히 ZIP 파일 다운로드를 시작합니다.
다만, 처음에 이게 잘못됐어요.
환경의 힘이 부족하기 때문이다.
글 자체는 778편의 글로 4.7MB 정도의 내용과 이미지 등이 담겨 있으며 펼친 결과의 파일 크기는 234MB다.
이것을 출력하기 위해서 GCP의 무료 상자 "f1-micro"를 처리할 수 없습니다.
구름의 장점을 활용해 기계 유형을 바꾸면 다운로드해 돌려놓는 것이다.

Hugo에 데이터 읽기

가져오기 오류

Hugo 자체 설치 등에 대해서는 정보가 많아 생략합니다.
이전원에서 다운로드한 ZIP 파일을 복원해서 만든 폴더'hugo-export'의'posts'에는 778개의 파일이 있습니다.
우선 이를 Hugo로 만든 웹사이트 구성에 있는 콘텐츠로 복사하면 표시될 텐데 오류가 발생했다.
글 제목의 첫머리에 "@"을 사용하면 오류가 발생합니다.
반면 부팅 등급이 아닌 오류는 이것 하나로, 이식성이 높다.

계층 디스플레이

또 하나의 폴더 778이라는 파일의 존재도 처리하기 어려워 매년 폴더로 나누기로 했다.
2003년부터 2020년까지(왠지 중도 도약의 해가 있었다).요즘은 드물지만 자주 지속됩니다.
이게 나중에 작용할 거예요.Hugo에게 콘텐츠 산하 계층은 개의치 않는다(한 부서로 취급되지만) 정말 고맙다.

불필요한 행 삭제

또 오류는 아니지만 표시되지 않는 정보 등이 있다.
출력된md 파일의 기술에는 p 라벨이나div 라벨로 출력된 파일이 있습니다.
탭 사이에 빈 줄이 있으면 탭을 표시하거나 표시하지 않습니다.
이것을 모두 대체합니다.
VScode를 사용해야 한다는 전제 조건

>\n    \n    <

로 대체

>\n    <

.
탭을 닫으면 뒤에 공간이 있을 때가 있어요.

> \n    \n    <

앞머리 공간의 수도 4개 또는 6개이기 때문에 각양각색으로 각 도형으로 대체한다.

이미지 링크

그림 파일도 다운로드가 끝났기 때문에static 폴더 아래에 놓았습니다.
참조할 수도 있지만 이미지의 링크 설명
설명은 다음과 같다

<img src="https://i2.wp.com/

.
i2.wp.com이란 무엇입니까?이에 따라 워드프레스에 제팩을 넣으면 이 사이트에 캐시를 하는 것으로 조사됐다.사표 낼 때 처음 알았어요.
사실, 이것도 한 번에 교환할 수 있지만, 잠시 감사하지만, 그렇게 사용했습니다.

Hugo 주제 선택

나는 주제를 선택하는 것이 매우 고민스럽다고 생각한다.
처음에는'hugo-theeme-learn'을 설치해 보았다.
왼쪽 창의 풍부함을 좋아하지만, 문외한에게는 문턱이 조금 높은 느낌이어서 이전 블로그와 비슷한 표현을 한'마인로드'를 선택했다.
그 설정 방법 등에 관하여 아래 사이트의 보살핌을 받았습니다.
HUGO 주제인 "Mainroad"의 설정 방법을 소개합니다.
Hugo를 통해 블로그와mainroad 테마의 사용자 정의 제작
먼저 주제를 전환하고 다음을 클릭합니다.

まだ何も投稿していません！
content 以下のどこかのディレクトリに投稿を追加するとここに表示されます。デフォルトでは（最も投稿の多い）１つのセクション だけがメインページに表示されます。

ヒント: 設定のパラメーター mainSections を使って好きな数だけセクションを表示させることもできます。

의 화면이 나와서 도대체 뭔지 고민이 많았는데, 일단 본격적인 Config이 나오면.toml example을 나타냅니다.
거기서 온갖 수사를 하면서 설정치를 바꾸는데 지금 보면 그렇다.
(나중에 아카이브 애플릿에 대해 설명)

GiitHub Pages 디버그

사실 디자인 측도 최근 많은 사랑을 받는 넷라이프가 수월할 것으로 생각했지만 쉽지 않은 길을 택해 기릿허브 페이지스를 선택했다.
이런 상황에서 가장 먼저 결단을 내려야 하는 것은

GiitHub Pages 프로젝트(프로젝트 웹 사이트)

personal/organizationsite(사용자 사이트, 조직 사이트)
의 유형은 무엇입니까?

하지만 처음 만든 나는 정보가 있는 사람의 입장을 따라야 했다.
GiitHub Actions를 통해 GiitHub Pages로 자동 디버깅
제가 이 사이트를 사용하는 방법을 허락해 주십시오.
그런데 이게 어떤 유형인가요?나는 좀 이해하기 어렵다고 생각한다.
이것은 프로젝트 사이트입니다.

https://ユーザ名.github.io/リポジトリ名/

의 URL입니다.
단계는 다음과 같습니다.
(1) .github로 창고, 소스push 만들기
push 전에gitignore를 만드는 것도 그렇고

.DS_Store
public/

(2) .github/workflows/gh-pages.만드는 방법:
기본적으로 쓴 것과 같다.
이번에 허고버젼을 설치했는데 0.79.0에 불과했다.
(3) GiitHub 창고의 Settings 내 GiitHub Pages 설정
상술한gh-pages.yml를 실행했기 때문에gh-pages라는 지점이 형성되었다.
프로젝트 웹 사이트를 만들려면 이 분기를 Source로 지정하십시오.

지점의 출처를 보면 알 수 있도록 각 보도의 폴더가 갑자기 보이는 상태이기 때문에 지정합니다.
공개된 URL이 표시됩니다.
이렇게 해서 URL을 열었지만 스타일이 맞지 않아 기사를 보고 싶어도 링크가 끊겼다.
프로젝트 사이트의 경우 Hugo의 뿌리가 창고 이름 아래에 있기 때문이다.
이것에 대응하기 위해config.toml의 시작, baseURL

baseURL = "https://jqinglong.github.io/programmers-office/"

.
이렇게 되면 이미 과도가 완성된 것이 아닌가.

압축 파일widget

다만, 과거 기사를 방문한 링크가 없다는 점이 부족할 뿐이다.
클래스와 탭 위젯은 자동으로 생성되지만, 지정한 연도와 월의 글을 표시할 수 없습니다.
수요가 있을 수도 있지만 다들 힘들게 맞서는 것 같아.
처음에는 연별로 폴더를 나눠서 만들었기 때문에 그 구역을 쓰면 안 되겠다는 생각이 들었어요.
하지만 결론은 Hugo가 준비가 되어 있고 Taxonomies의archives를 사용한다는 것이다.
처음엔 내가 여기서 할 일을 잡을 거야.
Hugo에서 매달 파일을 만들어요.
다만, 세부 사항을 생략한 것 같아서 다음과 같은 내용도 참고했습니다.
Hug-Taxonomy로 파일 페이지 만들기
단계는 다음과 같습니다.
(1) config.toml에 taxonomies의 정의를 추가합니다
위에서 말한 바와 같이 tag,category,archive 세 개가 추가됩니다.
sidebar에 archives 위젯을 추가합니다.

[Params.sidebar]
  home = "right" # Configure layout for home page
  list = "right"  # Configure layout for list pages
  widgets = ["search", "recent", "categories", "taglist", "social", "languages", "archives"]

[taxonomies]
  tag = "tags"
  category = "categories"
  archive = "archives"

(2) 애플릿 정의 파일 만들기
themes/mainroad/layouts/partials/widgets/categories.html
다음을 클릭합니다.
layouts/partials/widgets/archives.html
탭
주요 부분의 l 라벨 안에서 상술한 사이트의 기술을 이용하게 해 주십시오.

{{- $archives := .Site.Taxonomies.archives }}
{{- if gt (len $archives) 0 }}
<div class="widget-archives widget">
	<h4 class="widget__title">アーカイブ</h4>
	<div class="widget__content">
    <ul>
      {{ range $items := .Site.Taxonomies.archives.Alphabetical.Reverse }}
        <li><a href="{{ $.Site.BaseURL }}archives/{{ .Name | urlize | lower }}">{{ .Name }} ({{ .Count }})</a></li>
      {{ end }}
    </ul>
	</div>
</div>
{{- end }}

다른 언어화도 어렵지 않지만 일본어를 많이 쓴다.
(3) 각 기사에 archives의 기술 추가
어쨌든 700개의 서류를 하나씩 넣을 수는 없다.
VScode로 범위를 통일적으로 지정할 수 있기 때문에 매년 폴더가 바뀝니다.
부터

\nurl: 

\narchives:\n    - 2004\nurl: 

의 느낌.

감상

가장 큰 장점은 베스코드에서 벗어나지 않고 집필부터 투고까지 할 수 있다는 거죠.
내가 쓴 블로그의 라이트하우스 성적도 매우 높다.
좀 쓸게요.