126 lines
4.5 KiB
Markdown
126 lines
4.5 KiB
Markdown
---
|
|
title: Le site
|
|
seo_title: Le site
|
|
slug: website
|
|
date: 2023-10-09T18:20:00.000Z
|
|
toc: true
|
|
author:
|
|
- obsidian
|
|
series: null
|
|
---
|
|
|
|
### 1 week
|
|
|
|
That's how long it took me to create this site.
|
|
Although it's time-consuming, I still haven't been able to find a real working method, and if I knew where to get my info, I've discovered a few tips for working with Hugo
|
|
|
|
This is a static site, and I refer you to this article I wrote at the time:
|
|
[https://site.lafun.fr/siteloweb/](https://site.lafun.fr/siteloweb/)
|
|
|
|
But I'd like to tell you from a developer's point of view how these projects are a joy
|
|
|
|
Hugo
|
|
|
|
The framework used, Hugo, is a site generator based on file and code organization. As a dev, you understand the mechanics of the framework very well, so you can do what you're looking for, and the Go language, while not very elegant on the page, allows for correct verbosity while using command-line codes, so you don't get lost.
|
|
|
|
### TinaCMS
|
|
|
|
I spent nearly a week finding a CMS that meets the site's needs.
|
|
|
|
Tina seems perfectly suited to its purpose and was as easy to set up as netlify or forestry: a config file that takes the content data structure in JSON and applies properties to the fields to create the forms. Really a piece of cake... but it took days to configure Tina in the desired mold.
|
|
|
|
For example, in Hugo, files are arranged in folders and subfolders.\ folders.
|
|
A simple list is a list of .md files containing information.
|
|
But if you also want to store images or other content for each article created, you need to create a folder with an index.md file inside. This is called a branch bundle.
|
|
And to create a branch bundle with Tina, we need to pass it a function so that it creates our files as index.md in a folder containing the title of our article:
|
|
|
|
``typescript
|
|
{
|
|
name: 'createurs',
|
|
label: 'Createurs',
|
|
path: 'content/createurs',
|
|
ui: {
|
|
filename: {
|
|
// if disabled, the editor can not edit the filename
|
|
readonly: true,
|
|
// Example of using a custom slugify function
|
|
slugify: (values) => {
|
|
// Values is an object containing all the values of the form. In this case it is {title?: string, topic?: string}
|
|
return `${values?.title
|
|
?.toLowerCase()
|
|
.replace(/ /g, '-') + '/index.md'}`
|
|
},
|
|
}
|
|
},
|
|
```
|
|
|
|
\
|
|
\
|
|
Already, it matched my site and I could edit articles locally, but what about the online version?
|
|
|
|
\
|
|
Without any in-depth knowledge of automatic deployment modules, I had to write a CI/CD Pipeline to match the TinaCMS + Hugo integration.
|
|
|
|
yaml
|
|
name: Firebase update
|
|
run-name: ${{ github.actor }} launched an update of the Meridian site
|
|
on:
|
|
push:
|
|
branches:
|
|
- master
|
|
jobs:
|
|
deploy:
|
|
runs-on: ubuntu-22.04
|
|
concurrency:
|
|
group: ${{ github.workflow }}-${{ github.ref }}
|
|
steps:
|
|
- uses: actions/checkout@v3
|
|
|
|
- name: Copy images
|
|
run: cp -r static/uploads/screenshots assets/images
|
|
|
|
- name: Setup Node
|
|
run: npm ci
|
|
|
|
- name: Build TinaCMS
|
|
env:
|
|
TINA_PUBLIC_CLIENT_ID: ${{ secrets.TINA_PUBLIC_CLIENT_ID }}
|
|
TINA_TOKEN: ${{ secrets.TINA_TOKEN }}
|
|
run: npx tinacms build
|
|
|
|
- name: Hugo setup
|
|
uses: peaceiris/actions-hugo@v2
|
|
with:
|
|
hugo-version: '0.119.0'
|
|
extended: true
|
|
|
|
- name: Build
|
|
run: hugo --minify
|
|
|
|
- uses: FirebaseExtended/action-hosting-deploy@v0
|
|
with:
|
|
repoToken: '${{ secrets.GITHUB_TOKEN }}'
|
|
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MERIDIAN_CORP }}'
|
|
projectId: meridian-corp
|
|
channelId: live
|
|
```
|
|
|
|
So there are several things:
|
|
|
|
* actions/checkout\@v3 reads the file architecture on github
|
|
* copy image transfers the screenshots folder from static/uploads/screenshots to assets/screenshots so that Hugo can retrieve them as image objects, and .resize them for example (he can't with the static folder).
|
|
* Setup Node, without which tina won't work
|
|
* Build TinaCMS is used to create the administration. You need to meet the prerequisites given in [their guide ](https://tina.io/docs/frameworks/hugo/) and install node.
|
|
* Hugo Setup + Build to create the folder
|
|
* Firebase lets you deploy my site automatically, manage production...
|
|
|
|
### Domain
|
|
|
|
Hosted at Gandi, I found a meridian-corp.org site available
|
|
|
|
Sounds good... .org as an organization cut off from political members. A place that transcends countries.
|
|
|
|
All we had to do was match the DNS keys between Gandi and Firebase, and the deployment was complete!
|
|
|
|
And that's how this site was born.
|