Lorsque l’on développe des applications mobiles ou que l’on fait du freelancing dans le développement mobile, il peut être intéressant d’avoir un site « vitrine » permettant d’afficher son parcours et les applications que l’on a publiées.

A la fin de cet article, vous serez capable de créer un site internet statique à partir de Swift et du framework Publish.

Installer Publish

Publish est un framework développé en Swift par John Sundell permettant de créer en quelques minutes un site internet qui vous permettra de poster des articles ou de mettre en avant vos applications publiées sur l’AppStore ou le PlayStore.

Si vous connaissez déjà un peu le langage Swift (à travers le développement d’application iOS), le gros avantage de ce framework est que vous pourrez facilement personnaliser votre site puisqu’il est développé avec le même langage.

Pour installer Publish il est nécessaire d’avoir un Mac avec Xcode d’installé (disponible dans l’App Store).

Ensuite ouvrez un terminal de commande (raccourci : Cmd + Espace -> Terminal) puis exécutez les lignes de commandes suivantes pour cloner le projet sur votre ordinateur et lancer son installation : 

git clone https://github.com/JohnSundell/Publish.git
cd Publish
make

En fonction de votre configuration, il est possible que la dernière ligne entraine une erreur. Si c’est le cas c’est que vous n’avez pas les droits suffisants pour exécuter la commande. Dans ce cas exécutez : 

sudo make

Saisissez votre mot de passe utilisateur lorsqu’il vous sera demandé.

Ça y est Publish est installé.

Créer votre projet de site internet

Toujours dans le terminal de votre Mac, créez le répertoire qui contiendra votre projet de site et lancez la création de celui-ci avec les commandes suivantes : 

mkdir MonIncroyableSite
cd MonIncroyableSite
publish new
Terminal avec création du projet de site internet Publish en Swift
Création du projet de site internet

L’exécution de la commande va entrainer la création d’un package Swift contenant plusieurs fichiers et répertoires. Placez vous dans votre répertoire et ouvrez le fichier Package.swift afin d’ouvrir le package dans Xcode.

Contenu du package

Une fois Xcode ouvert, vous avez à gauche de la fenêtre la liste des dossiers et fichiers de votre package ainsi que les dépendances.

Projet de site internet avec Publish dans Xcode
Votre projet de site internet dans Xcode

Cette arborescence représente votre projet de site Internet. Il contient différents éléments que nous allons détailler ci-dessous.

Fichier Package.swift

C’est le fichier qui vous a permis d’ouvrir le projet dans Xcode. Ce fichier contient la configuration de votre projet. Il peut être nécessaire de le modifier si vous souhaitez ajouter de nouvelles fonctionnalités à votre site (par exemple pouvoir mettre en forme automatiquement vos lignes de code, ou créer un thème personnalisé). Vous n’aurez pas besoin d’y toucher dans le cadre de cet article.

Répertoire Content

Ce répertoire contient les articles et les pages de votre site internet. L’aborescence doit respecter le paramétrage de votre site internet (nous allons en parler un peu plus loin dans l’article).

Par défaut, ce répertoire contient un sous-répertoire posts correspondant à une section de votre site internet lui-même contenant un fichier index.md (correspondant à la page d’accueil de votre section) et un fichier first-post.md (correspondant à votre premier article).

Le fichier index.md à la racine du répertoire Content contient les informations qui seront affichées sur la page d’accueil de votre site.

L’extension md des fichiers d’articles correspond à Markdown, un langage de balisage permettant, à travers une syntaxe facile à lire, de formater votre texte.

# Ceci est un titre (de niveau 1)
## Ceci est un sous-titre (de niveau 2)

*ceci est un texte en italique*

**ceci est un texte en gras**

Ci-dessous se trouve une liste : 
* 1er élément
* 2ème élément
* 3ème élément

Répertoire Resources

Ce répertoire contient les ressources (logo, images, polices de caractère, fichier CSS) qui seront utilisées par votre site lorsque vous souhaiterez le personnaliser. Par défaut le répertoire est vide.

Fichier main.swift

Le fichier main.swift, disponible dans le répertoire Sources/MonIncroyableSite/ contient les instructions permettant de gérer les sources de votre site internet.

C’est ce fichier qui sera exécuté afin de générer les sources de votre site internet.

Ce fichier contient également une liste de variables à paramétrer afin de personnaliser votre site internet. Nous allons rentrer dans le détail de certaines de ces variables dans le paragraphe suivant. 

import Foundation
import Publish
import Plot

// This type acts as the configuration for your website.
struct MonIncroyableSite: Website {
    enum SectionID: String, WebsiteSectionID {
        // Add the sections that you want your website to contain here:
        case posts
    }

    struct ItemMetadata: WebsiteItemMetadata {
        // Add any site-specific metadata that you want to use here.
    }

    // Update these properties to configure your website:
    var url = URL(string: "https://your-website-url.com")!
    var name = "MonIncroyableSite"
    var description = "A description of MonIncroyableSite"
    var language: Language { .english }
    var imagePath: Path? { nil }
}

// This will generate your website using the built-in Foundation theme:
try MonIncroyableSite().publish(withTheme: .foundation)

Personnaliser votre site internet

Maintenant que nous avons une vue d’ensemble du package qui permettra la création de votre site internet, nous allons personnaliser certains éléments importants.

Liste des sections

Le premier élément à personnaliser est la liste des sections de votre site internet. Ce paramétrage est réalisé à travers l’énumération SectionID. Par défaut le site contient une section posts destinée à contenir une liste d’articles (dans le cadre d’un blog par exemple). Vous vous souvenez du répertoire posts présent dans le répertoire Content de votre package ? Il est associé à cette section. Si vous ajoutez une nouvelle section, il sera nécessaire d’ajouter un répertoire du même nom dans le répertoire Content.

Dans mon exemple, je vais partir sur la création d’un site vitrine avec 3 objectifs et donc 3 sections distinctes :

  • Posts : Section « Articles » (déjà renseignée par défaut) qui contiendra une liste d’articles que j’écrirai relative au développement d’applications mobiles.
  • Applications : Section « Applications » qui contiendra une seule page avec un bref descriptif des applications que j’ai créées et un lien vers l’AppStore pour chacune d’elle.
  • About : Section « A propos » qui contiendra une seule page avec une brève présentation de moi-même accompagnée de différents liens permettant de me contacter (Mail, Twitter, Facebook, …). 
enum SectionID: String, WebsiteSectionID {
    // Add the sections that you want your website to contain here:
    case posts
    case applications
    case about
}

Les sections applications et about ne contenant qu’une seule page, il n’est pas nécessaire de créer un répertoire du même nom dans le répertoire Content. En revanche il est nécessaire de créer nos 2 pages à la racine du répertoire Content avec le nom des sections associées :

  • Fichier applications.md pour la section applications
  • Fichier about.md pour la section about

A noter que les noms d’énumération de peuvent pas contenir d’espace, c’est pourquoi il n’est pas possible de créer une section « A propos » directement. Je l’ai donc appelée about pour le moment et je vous expliquerai un peu plus loin comment remplacer les noms de sections de votre site internet.

Propriétés du site internet

Nous allons maintenant modifier les propriétés du site internet afin de personnaliser certains élements qui seront affichés.

Je vous mets directement ci-dessous le code que j’ai utilisé, mais je vous laisse le personnaliser à votre guise. 

// Update these properties to configure your website:
var url = URL(string: "https://mon-incroyable-site.fr")!
var name = "Mon Incroyable Site"
var description = "Ce site est vraiment incroyable !"
var language: Language { .french }
var imagePath: Path? { nil }

Ça y est ! Votre futur site est paramétré, il est temps de passer à sa génération.

Générer votre site internet

Nous arrivons sur la dernière étape qui va consister à créer les fichiers sources de votre site internet (que vous n’aurez plus qu’à charger sur votre hébergeur de site internet pour le rendre accessible au monde entier !). Dans notre exemple, nous allons utiliser une commande qui nous permettra de consulter le site avant sa « mise en production ».

Pour lancer la création de votre site, cliquer sur l’icone « triangle » en haut à gauche de l’interface d’Xcode.

Bouton build Xcode
Bouton « Build » permettant la création du site internet

Une fois l’opération de construction terminée, un nouveau répertoire Output s’affichera dans l’arborescence de votre package. C’est ce répertoire qui contient les fichiers sources de votre site internet et ce sont ces fichiers qui doivent être copiés sur votre serveur d’hébergement.

Afin de faciliter les tests, nous allons utiliser une commande permettant de visualiser en local le site internet. Retournez dans votre terminal, placez-vous dans le répertoire de votre projet et lancez la commande suivante :

publish run

Cette commande va créer un serveur local accessible à l’adresse suivante : http://localhost:8000.

Page d’accueil de mon Incroyable Site

Et voilà ! En quelques minutes nous avons créé notre site internet. Certains termes sont en anglais, mais la plupart proviennent des pages d’exemple du répertoire Content que vous pouvez modifier. En revanche, nous voyons que nos titre de section sont en anglais (conformément à ceux que nous avons renseigné dans l’énumération). Il est tout a fait possible de modifier ça avec un peu de code supplémentaire.

Bonus : Modifier les noms de vos sections

L’installation de Publish est relativement bien documentée sur la page git du créateur. En revanche, lorsque vous souhaitez aller un peu plus loin dans la personnalisation de votre site, il est nécessaire d’arpenter le code source à la recherche de la fonction qui permettra de faire ce que vous souhaitez. Le code qui va suivre est à utiliser à la place de la dernière ligne de code de votre fichier main.swift. 

try MonIncroyableSite().publish(
    using: [
        .addMarkdownFiles(),
        .copyResources(),
        .step(named: "Modification titres sections", body: { context in
            context.mutateAllSections { section in
                switch section.id {
                case .posts:
                    section.title = "Articles"
                case .applications:
                    section.title = "Applications"
                case .about:
                    section.title = "À propos"
                }
            }
        }),
        .generateHTML(withTheme: .fondation),
        .generateRSSFeed(including: [.posts]),
        .generateSiteMap(),
    ]
)

Conclusion

Et voila, vous avez créé votre site internet en Swift en quelques minutes ! Il ne vous reste plus qu’à écrire des articles, à créer votre page « A propos » ou bien à faire la promotion de vos applications !

Le framework Publish offre énormément de possibilités en termes de personnalisation qui vont bien au delà de ce que nous avons vu dans cet article (gestion des polices de caractères, dark mode/light mode, colorisation des tags, formatage du code, …).

Seriez-vous interessé pour aller un peu plus loin ? N’hésitez pas à me le dire en commentaire si vous souhaitez un article un peu plus poussé à ce sujet !