One place for hosting & domains

      How To Build and Deploy a Hugo Site to DigitalOcean App Platform


      Hugo is a static site generator and framework for building websites. With Hugo, you define your themes using HTML and build your content using Markdown or other text processors. Hugo generates HTML that you can host anywhere.

      In this tutorial, you’ll use Hugo to build a small static website and deploy the site to DigitalOcean’s App Platform by using GitHub. Then you’ll make changes to your site and see those changes deployed automatically.

      Prerequisites

      To complete this tutorial, you’ll need:

      Step 1 — Installing Hugo

      To build your Hugo site, you’ll install the hugo command-line tool on your local machine. You’ll use this tool to generate your site, create content pages, and launch a small server you’ll use to test your site before you deploy it.

      Hugo is available as a single binary, so the installation process involves downloading the file to your machine and placing it on your path.

      Download Hugo from the releases page on GitHub. Hugo comes in two versions: the regular version and the extended version. Download the extended version so you have support for asset management and support for CSS preprocessing. Save the file to your Downloads directory.

      Once you’ve downloaded the file, you’ll need to uncompress the file and place it somewhere on your system PATH so you can run the file from any directory.

      On Windows, create the directory C:Hugo, unzip the file you’ve downloaded, and place it in C:hugo. Then add that folder to your PATH environment variable. To do this, use Windows Search and type “environment”. Select Edit Environment Variables for My Account. On the screen that appears, press the Environment Variables button, locate PATH in the System Variables section, and press the Edit button. Add c:hugobin in the text area and press OK to save the settings. Press OK on the rest of the dialogs to close them.

      On macOS or Linux, copy the executable to /usr/local/bin, as this is already included in your PATH environment variable by default.

      First, switch to the Downloads directory:

      Uncompress the file:

      • tar zxvf hugo_extended_0.75.1*.gz

      Then move the file to /usr/local/bin:

      Ensure that Hugo is configured by switching to your home directory and typing the hugo command:

      You’ll see the version number printed to the screen:

      Output

      Hugo Static Site Generator v0.75.1-A4A7BAB7/extended darwin/amd64 BuildDate: 2020-09-15T06:54:33Z

      Now that Hugo is installed, you can create your site.

      Step 2 — Creating the Hugo Project

      Let’s create a small site about sharks. We’ll call it “Sharkopedia”, and it will have pages about different kinds of sharks.

      To create a site, use the hugo new site command. From your home directory, execute the following command:

      • hugo new site sharkopedia

      This creates the directory sharkopedia and displays a welcome message that tells you how to install a theme for your site:

      Output

      Congratulations! Your new Hugo site is created in /Users/your_username/sharkopedia. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.

      Instead of installing an existing theme, you’ll add a small amount of HTML and CSS to your site to define how it looks. Existing themes can often require a lot of configuration, and that’s outside of the scope of this tutorial.

      Switch to the sharkopedia directory:

      Your Hugo site has the following structure:

      Output

      ├── archetypes ├── config.toml ├── content ├── data ├── layouts ├── resources ├── static └── themes
      • archetypes are your content templates. You can use the hugo command to create new Markdown pages, and it’ll use the files in the archetypes directory as the template for those pages.
      • config.toml is the configuration file for the site, where you specify the site’s domain, title, and the theme you want to use.
      • content is the directory that holds your site’s content.
      • data is where you can store JSON files you can use when generating your site.
      • layouts is where you place the HTML files that define your site’s look and feel, or override the templates from a theme.
      • resources is where Hugo places files it generates, like optimized images.
      • static holds static assets, like files, stylesheets, scripts, or other assets that you don’t need Hugo to manage for you.
      • themes contains themes you create or download.

      You won’t use a theme in this tutorial; you’ll define HTML files in the layouts directory to define the way your site looks.

      Before moving on, open the file config.toml in your editor. Change the baseURL field to an empty string, and modify the title so it says “Sharkopedia”:

      config.toml

      baseURL = ""
      languageCode = "en-us"
      title = "Sharkopedia"
      

      Save the file.

      Next, you’ll create the layout and content for the site. The site will have a home page and a section called “Sharks”. To display your content, Hugo needs three types of template files:

      • A template for the home page.
      • A template for a page of content, like a page about a single shark.
      • A template that shows a list of pages, such as a page that lists all the sharks, or all of the tags or categories on the site.

      Let’s start by creating the home page template. Create the file layouts/index.html and open it in your editor. Add the following code to the file to define the site:

      layouts/index.html

      <!DOCTYPE html>
      <html lang="en-US">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title><^>{{ .Site.Title }}</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/style.css">
        </head>
        <body>
      
          <header>
            <h1>{{ .Site.Title }}</h1>
          </header>
      
          <main>
            <h2>{{ .Title }}</h2>
            {{ .Content }}
          </main>
      
          <footer>
            <small>Made with love and Hugo</small>
          </footer>
        </body>
      </html>
      

      The {{ .Site.Title }} lines grab the title from the config.toml file. The {{ .Title }} line and {{ .Content }} line grab the title and content from the document associated with the home page, which you’ll create next.

      Save your file.

      By default, Hugo creates all new pages in draft mode. Open the file archetypes/default.md in your editor and modify it so that draft is false. This way all new pages you create won’t be in draft mode.

      archetypes/default.md

      ---
      title: "{{ replace .Name "-" " " | title }}"
      date: {{ .Date }}
      draft: false
      ---
      

      The replace line in the title field tells Hugo to generate the page’s title based on the filename.

      Save the file.

      Now use Hugo to generate a content file for your home page. From the terminal, in the directory of your project, type this command:

      This generates the file content/index.md:

      Output

      /Users/your_username/sharkopedia/content/_index.md created

      The underscore in the filename tells Hugo that this is the content page for either a listing page or the home page, as opposed to a regular piece of content.

      Open the content/_index.md file in your editor and add some text and change the title:

      content/_index.md

      ---
      title: "Welcome"
      date: 2020-10-07T14:07:35-05:00
      draft: false
      ---
      This is a site all about sharks! Select a shark from the list to learn more:
      

      The content in this file will be placed on the home page. Let’s test it out.

      From the terminal, launch Hugo’s development server with the following command:

      Visit http://localhost:1313 in your web browser and you’ll see your home page:

      The home page

      Once you’ve verified that the site is working, press CTRL+C to stop the server.

      Next you’ll need a template for single pieces of content, and for this project, you can duplicate the home page, although you’ll have to place it in a specific directory.

      Create the directory layouts/_default:

      Then create the file layouts/_default/single.html and copy the contents of your layouts/index.html file into the new file. You can do this from the command line with this command:

      • cp layouts/index.html layouts/_default/single.html

      Next, you’ll create a sharks content section of the site. To do so, you’ll use the hugo command to create new Markdown files in the content directory under a sharks subdirectory. Execute this command to create a content page for Hammerhead sharks:

      • hugo new sharks/hammerhead.md

      Note that you don’t specify the content directory when using the hugo new command.

      Now launch Hugo’s development server:

      Visit http://localhost:1313/sharks/hammerhead.md to see your page for Hammerhead sharks:

      Hammerhead page

      If you visit http://localhost:1313/sharks, you won’t see anything because you haven’t defined the final template you need: the template that Hugo uses to display lists of content. Let’s do that now.

      Stop the server by pressing CTRL+C.

      Create the file layouts/_default/list.html and open it in your editor. Inside the file, place the same content as your other templates:

      layouts/_default/list.html

      <!DOCTYPE html>
      <html lang="en-US">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title><^>{{ .Site.Title }}</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/style.css">
        </head>
        <body>
      
          <header>
            <h1>{{ .Site.Title }}</h1>
          </header>
      
          <main>
            <h2>{{ .Title }}</h2>
            {{ .Content }}
          </main>
      
          <footer>
            <small>Made with love and Hugo</small>
          </footer>
        </body>
      </html>
      

      Inside the <main> tag, after the title and content, place the following code which generates a bulleted list of pages to display:

          <main>
            <h2>{{ .Title }}</h2>
            {{ .Content }}
      
            <ul>
            {{ range .Pages }}
              <li><a href="https://www.digitalocean.com/community/tutorials/{{ .RelPermalink }}">{{ .Title }}</a></li>
            {{ end }}
            </ul>
          </main>
      
      

      The range function iterates over all of the pages for the section of the site. The actual value of .Pages is determined when Hugo generates your site. This list template you created will be used as the default template for any lists, including tag pages, category pages, and your “sharks” section. You can make more specific templates for your sections, but this gives you a default layout that works everywhere. Save the file.

      Finally, create pages for Mako sharks and whale sharks so there’s more content to display:

      • hugo new sharks/mako.md
      • hugo new sharks/whale.md

      Start the server again with hugo serve and visit http://localhost:1313/sharks and you’ll see the three Shark pages listed:

      The sharks page with all three pages listed

      Stop the server with CTRL+C.

      Your site is ready. Next you’ll push your code to GitHub so you can deploy it.

      Step 3 — Pushing the Site to GitHub

      DigitalOcean App Platform deploys your code from GitHub repositories, so the first thing you’ll need to do is get your site in a Git repository and push that repository to GitHub.

      First, initialize your Sharkopedia project as a Git repository:

      When you generate your site, Hugo will place files in a directory called public. Let’s exclude that directory by adding it to Git’s ignore list. Create a new file called .gitignore and add the following code to the file:

      .gitignore

      public
      

      Save the file.

      Now execute the following command to add files to your repository:

      • git add archetypes/ config.toml content/ .gitignore layouts/

      You’ll notice that the data, themes, resources, static, and themes aren’t included in this command; those directories are empty and Git only stores files, not directories. If you add your own data, themes, or static content later, you’ll add those directories later.

      Make your initial commit:

      • git commit -m "Initial version of the site"

      Your files will commit:

      Output

      [master (root-commit) b045f24] First version of the site 10 files changed, 114 insertions(+) create mode 100644 .gitignore create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/_index.md create mode 100644 content/sharks/hammerhead.md create mode 100644 content/sharks/mako.md create mode 100644 content/sharks/whale.md create mode 100644 layouts/_default/list.html create mode 100644 layouts/_default/single.html create mode 100644 layouts/index.html

      Open your browser and navigate to GitHub, log in with your profile, and create a new repository called sharkopedia. Create an empty repository without a README or license file.

      Once you’ve created the repository, return to the command line to push your local files to GitHub.

      First, add GitHub as a remote repository:

      • git remote add https://github.com/your_username/sharkopedia

      Next, rename the default branch main, to match what GitHub expects:

      Finally, push your main branch to GitHub’s main branch:

      Your files will transfer:

      Output

      Enumerating objects: 16, done. Counting objects: 100% (16/16), done. Delta compression using up to 6 threads Compressing objects: 100% (14/14), done. Writing objects: 100% (16/16), 1.58 KiB | 1.58 MiB/s, done. Total 16 (delta 1), reused 0 (delta 0), pack-reused 0 remote: Resolving deltas: 100% (1/1), done. To https://github.com/your_username/sharkopedia * [new branch] main -> main Branch 'main' set up to track remote branch 'main' from 'origin'.

      Enter your GitHub credentials when prompted to push your code.

      You’re ready to deploy your site to DigitalOcean’s App Platform.

      Step 4 — Deploying to DigitalOcean with App Platform

      Once the code is pushed, visit https://cloud.digitalocean.com/apps and click Launch Your App. You’ll be prompted to connect your GitHub account:

      Connect GitHub account

      Connect your account and allow DigitalOcean to access your repositories. You can choose to let DigitalOcean have access to all of your repositories, or just to the ones you wish to deploy.

      Allow repository access

      Press Install and Authorize. You’ll be returned to your DigitalOcean dashboard to continue creating your app.

      Once your GitHub account is connected, select the your_account/sharkopedia repository and click Next.

      Choose your repository

      Next, provide your app’s name, choose a region, and ensure the main branch is selected. Then ensure that Autodeploy code changes is checked. Press Next to continue.

      Choose name, region, and branch

      DigitalOcean will detect that your project is a Hugo site and will automatically populate the command to build your site.

      Hugo site detected and build command populated

      Press Next and you’ll be directed to the Finalize and Launch screen where you’ll choose your plan. Static sites are free, so choose Starter App and press Launch Starter App at the bottom. Your site will build:

      Site building and deploying

      Once the build process completes, the interface will show you a healthy site and provide a link for you to visit the site:

      [The deployed site in the dashboard](blob:https://imgur.com/874b4f40-5163-4ef3-82c3-4602a1ec0912)

      Now that your site is deployed, you can make changes by pushing your code to GitHub.

      Step 5 — Deploying Changes

      To ensure that changes get deployed, let’s add the list of sharks to the home page of the site. When you commit the changes to your repository and push them to GitHub, they’ll deploy automatically.

      Open the file layouts/index.html in your editor and add the following code to iterate over all the pages of your site that are sharks and display them:

      layouts/index.html

      ...
          <main>
            <h2>{{ .Title }}</h2>
            {{ .Content }}
      
            <ul>
            {{ range (where site.RegularPages "Type" "in" "sharks") }}
              <li><a href="https://www.digitalocean.com/community/tutorials/{{ .RelPermalink }}">{{ .Title }}</a></li>
            {{ end }}
            </ul>
          </main>
      

      This version uses (where site.RegularPages "Type" "in" "sharks") to find only the content pages for sharks. Unlike your default list template, your home page needs more direction about what kind of content to display.

      Save the file. Run the server with hugo serve and visit http://localhost:1313 to see your sharks listed:

      Sharks on the home page

      Press CTRL+C to stop the server.

      Now add the updated file to your repository:

      • git add layouts/index.html

      Make a commit:

      • git commit -m "Add sharks to home page"

      Finally, push your code to GitHub:

      Within a few moments, your changes will be deployed. If you switch back to your DigitalOcean App status page, you’ll see the progress bar deploying your app again:

      Redeploy progress

      Once it finishes, visit your site to see your changes live.

      Conclusion

      In this tutorial you built a basic Hugo website and deployed using DigitalOcean’s App Platform. Any changes you commit and push to your repository will be redeployed, so you can now expand your site. You can find the example code for this tutorial in the DigitalOcean Community Repository

      The example in this tutorial is a minimal Hugo site. Your own site may have more complex themes and features, but the deployment process will be the same.



      Source link

      How To Deploy a Static Site from GitHub with DigitalOcean App Platform [Quickstart]


      Introduction

      If you’ve built a static website in a local environment, the next step is to decide how to publish it to the web. One way to publish your site is to deploy it as an application through DigitalOcean App Platform, which allows developers to publish code directly to DigitalOcean servers without worrying about the underlying infrastructure. App Platform offers free hosting for your first three static sites.

      In this tutorial, you will deploy a static website with App Platform from a GitHub repository. To follow along, you should have your website files hosted in a GitHub repository that you own. If you need instructions for hosting files in a GitHub repository and creating a GitHub account, please visit our our more in-depth tutorial How To Deploy a Static Website to the Cloud with DigitalOcean App Platform. By the end of this tutorial, you should have a published website and an understanding of how to deploy websites to the cloud from a GitHub repository with App Platform.

      Prerequisites

      • A GitHub account.
      • Files for a static website in a GitHub repository that you own. You may also clone our sample static website repository for testing purposes.
      • A credit card or Paypal account for signing up with DigitalOcean’s cloud service. You will not be charged for your first three sites.

      Step 1 — Create Your DigitalOcean Account

      To create a DigitalOcean account, visit the sign up page and choose among the following options:

      • Entering an email address and password
      • Using Google Single Sign On
      • Using GitHub Single Sign On

      If you choose to use an email address and password, you will need to verify your email address using the link included in the email that is automatically sent to you after registration.

      Note that you will need to enter a payment method to verify your identity. This is a required step that helps to keep spammers out. You will not be charged. You may see a temporary pre-authorization charge to verify the card, which will be reversed within a week.

      Once you have verified your account, you should be able to access the DigitalOcean App Platform. For complete documentation about signing up for a DigitalOcean account, please visit our guide Sign up for a DigitalOcean Account.

      You are now ready to proceed to the next step.

      Step 2 — Deploy Your Website with DigitalOcean App Platform

      In this step we’ll deploy our static website with App Platform.

      First, visit the DigitalOcean App Platform portal and click on the blue “Launch Your App” button:

      App Platform Portal

      On the next page, you will be prompted to select your GitHub repository. Since you have not yet connected your App Platform account to your GitHub account, you’ll need to click on the “Link Your GitHub Account” button:

      App Platform webpage with first step of deloying an app

      You will then be prompted to sign into your GitHub account (if you aren’t already signed in) and select the account that you want to connect to App Platform. Once selected, you will be directed to a page where you can select which repositories to permit App Platform to access. Click the “Only select repositories” button and select the repository that you wish to push to App Platform.

      GitHub webpage where users select repository to connect to the App Platform

      When you are done, click the “Save” button at the bottom of the webpage. You will now be directed back to App Platform, where you should now be able to select your repository in the dropdown menu:

      App Platform webpage displaying menu for selecting repository

      After selecting your repository, click “Next.” You will then be prompted to choose the name, branch, and options for Autodeploy. If the Autodeploy box is checked, any future changes you make to your repository files will be immediately pushed to your live site. Make your selections and click “Next”:

      Choosing name and branch of repository window on the App Platform

      Next, you will be taken to a page where you can configure your App. This page should automatically detect your component type as a “Static Site”:

      App Platform webpage for configuring your app

      You should not need to make any changes on this page. Scroll down and click the blue button “Next” at the bottom of the page. You will be directed to a new window where you can select the “Starter” plan if you’d like to deploy this site as one of your free three static sites:

      App Platform page for selecting payment plan

      Select your desired plan and click the “Launch Your Starter App” button. You will be directed to your app’s admin page. When your app is finished deploying, you will see the “Deployed Successfully!” message:

      Admin page for app on App Platform.

      You will also see a link under your app’s name at the top of the page. Click on the link to make sure your site is working properly. You should be directed to a new web page with your published website. If your site is not appearing, go back and check for errors.

      Your static site should now be published to the web through App Platform. Anyone with the app link will be able to access your site. If you’d like to add a custom domain to your site, please visit our How To Manage Custom Domains guide in App Platform product documentation.

      Conclusion

      In this tutorial, you have learned how to deploy a static site from GitHub to the DigitalOcean App Platform. If you kept the “Automatically deploy on push” option selected in Step 2, any changes you make to your GitHub repository will be automatically pushed to your site. If you did not select that option, you can deploy your changes by returning to your App’s admin page and clicking the “Deploy” button in the upper right hand corner.

      For further information about App Platform, please visit the official App Platform product documentation and App Platform How To Manage Static Sites. Remember, you can host up to three free static sites. If you wish to delete your app, follow the instructions in the section Destroy an App in the product documentation.



      Source link

      Comment développer un site web Drupal 9 sur votre machine locale en utilisant Docker et DDEV


      L’auteur a choisi le Diversity in Tech Fund​​​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      DDEV est un outil open-source qui utilise Docker dans le but de construire des environnements de développement locaux pour de nombreux cadres PHP différents. Grâce à la puissance de la conteneurisation, DDEV peut grandement simplifier la façon dont vous travaillez sur des projets multiples qui utilisent plusieurs piles technologiques et plusieurs serveurs cloud. DDEV comprend des modèles pour WordPress, Laravel, Magento, TYPO3, Drupal, et plus encore.

      Drupal 9 a été publié le 3 juin 2020 pour le CMS Drupal. Connu pour sa facilité d’utilisation et sa vaste bibliothèque de modules et de thèmes, Drupal est un cadre PHP populaire pour la création et la maintenance de divers sites web et applications de toutes tailles.

      Dans ce tutoriel, vous allez commencer à développer un site web Drupal 9 sur votre machine locale en utilisant DDEV. Cela vous permettra de construire votre site web dans un premier temps, puis, lorsque vous serez prêt, de déployer votre projet sur un serveur de production.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      Note : Il est possible de développer Drupal 9 en utilisant DDEV sur un serveur à distance, mais vous aurez besoin d’une solution pour accéder à localhost dans un navigateur web. La commande de DDEV ddev share fonctionne avec ngrok , qui crée un tunnel sécurisé vers votre serveur pour que vous et d’autres parties prenantes puissiez voir votre site de développement. Pour un usage personnel, vous pouvez également installer une interface graphique sur votre serveur à distance et accéder à votre site de développement via un navigateur web à l’intérieur de cette interface. Pour ce faire, vous pouvez suivre notre guide Comment installer et configurer VNC sur Ubuntu 20.04. Pour une solution GUI encore plus rapide, vous pouvez suivre notre guide sur la façon de configurer un bureau à distance avec X2Go sur Ubuntu 20.04.

      Étape 1 — Installer DDEV

      Au cours de cette étape, vous installerez DDEV sur votre machine locale. L’option 1 comprend des instructions pour macOS, tandis que l’option 2 fournit des instructions pour Linux. Ce tutoriel a été testé sur la version 1.15.0 de DDEV.

      Option 1 — Installation de DDEV sur macOS

      DDEV conseille aux utilisateurs de macOS d’installer leur outil en utilisant le gestionnaire de paquets Homebrew . Utilisez la commande brew suivante pour installer la dernière version stable :

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Si vous préférez la version la plus récente, vous pouvez utiliser brew pour installer ddev-edge :

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Si vous avez déjà une version de DDEV installée, ou si vous souhaitez mettre à jour votre version, arrêtez DDEV et utilisez brew pour mettre à jour votre installation :

      • ddev poweroff
      • brew upgrade ddev

      Une fois que vous avez installé ou mis à jour DDEV, exécutez  ddev version pour vérifier votre logiciel :

      Vous verrez un résultat similaire à ce qui suit :

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV comprend un puissant CLI, ou interface de ligne de commande. Lancez ddev pour en savoir plus sur certaines commandes courantes :

      Vous verrez le résultat suivant :

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Pour plus d’informations sur l’utilisation de la CLI de DDEV, consultez la documentation officielle de DDEV.

      DDEV étant installée sur votre machine locale, vous êtes maintenant prêt(e) a installer Drupal 9 et à commencer à développer un site web.

      Option 2 — Installer DDEV sur Linux

      Sur un système d’exploitation Linux, vous pouvez installer DDEV en utilisant Homebrew pour Linux ou en utilisant le script d’installation officiel. Sur Ubuntu, commencez par mettre à jour votre liste de paquets dans le gestionnaire de paquets apt (vous pouvez utiliser apt dans Debian, sinon utilisez le gestionnaire de paquets équivalent associé à votre distribution Linux) :

      Installez maintenant quelques paquets pré-requis du dépôt officiel d’Ubuntu :

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Ces paquets vous permettront de télécharger le script d’installation de DDEV à partir de leur dépôt officiel GitHub.

      Maintenant, téléchargez le script :

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Avant d’exécuter le script, ouvrez-le dans nano ou votre éditeur de texte préféré et inspectez son contenu :

      nano install_ddev.sh
      

      Une fois que vous avez examiné le contenu du script et que vous êtes satisfait(e), enregistrez et fermez le fichier. Vous êtes maintenant prêt à exécuter le script d’installation.

      Utilisez la commande chmod pour rendre le script exécutable :

      Maintenant, lancez le script :

      Le processus d’installation peut vous demander de confirmer certains paramètres ou d’entrer votre mot de passe sudo. Une fois l’installation terminée, DDEV sera disponible sur votre système d’exploitation Linux.

      Exécutez la version ddev pour vérifier votre logiciel :

      Vous verrez un résultat similaire à ce qui suit :

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV est un puissant CLI, ou interface de ligne de commande. Exécutez ddev sans rien d’autre pour apprendre quelques commandes courantes :

      Vous verrez le résultat suivant :

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Pour plus d’informations sur l’utilisation du CLI de DDEV, vous pouvez consulter la documentation officielle de DDEV.

      DDEV étant installé sur votre machine locale, vous êtes maintenant prêt à déployer Drupal 9 et à commencer à développer un site web.

      Étape 2 — Déployer un nouveau site Drupal 9 en utilisant DDEV

      Avec l’exécution de DDEV, vous allez maintenant l’utiliser pour créer un système de fichiers spécifique à Drupal, installer Drupal 9, et ensuite lancer un projet de site web standard.

      Tout d’abord, vous allez créer un répertoire root du projet et ensuite vous déplacer à l’intérieur de celui-ci. Vous exécuterez toutes les commandes restantes à partir de cet emplacement. Ce tutoriel utilisera d9test , mais vous êtes libre de donner un autre nom à votre répertoire. Notez cependant que DDEV ne gère pas bien les noms avec trait d’union. Il est considéré comme une bonne pratique d’éviter les noms de répertoire comme my-project ou drupal-site-1.

      Créez le répertoire root de votre projet et naviguez à l’intérieur :

      DDEV excelle dans la création d’arborescences de répertoires qui correspondent à des plateformes CMS spécifiques. Utilisez la commande ddev config pour créer une structure de répertoire spécifique à Drupal 9 :

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Vous verrez un résultat similaire à ce qui suit :

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Parce que vous avez passé --project-type=drupal9 à votre commande ddev config, DDEV a créé plusieurs sous-répertoires et fichiers qui représentent l’organisation par défaut pour un site Drupal. L’arborescence de votre répertoire de projets ressemblera désormais à ceci :

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      ddev/ sera le dossier principal pour la configuration de ddev. web/ sera le root documentaire de votre nouveau projet ; il contiendra plusieurs fichiers settings. spécifiques. Vous disposez maintenant de la structure initiale pour votre nouveau projet Drupal.

      Votrte prochaine étape consiste à initialiser votre plate-forme, qui permettra de construire les conteneurs et les configurations de réseau nécessaires.  DDEV se lie aux ports 80 et 443, donc si vous utilisez un serveur web comme Apache sur votre machine, ou tout autre chose qui utilise ces ports, arrêtez ces services avant de continuer.

      Utilisez la commande ddev start pour initialiser votre plate-forme :

      Cela permettra de construire tous les conteneurs basés sur Docker pour votre projet, qui comprennent un conteneur web, un conteneur de base de données et phpmyadmin. Une fois l’initialisation terminée, vous verrez un résultat comme celui-ci (votre numéro de port peut être différent) :

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Note : N’oubliez pas que DDEV démarre les conteneurs Docker en arrière-plan ici. Si vous voulez voir ces conteneurs ou vérifier qu’ils fonctionnent, vous pouvez toujours utiliser la commande docker ps :

      En plus des autres conteneurs que vous utilisez actuellement, vous trouverez quatre nouveaux conteneurs, chacun avec une image différente : php-myadmin, ddev-webserver, ddev-router, et ddev-dbserver-mariadb.

      ddev start a réussi à construire vos conteneurs et vous a donné une sortie avec deux URL. Bien que cette sortie indique que votre projet « can be reached at http://d9test.ddev.site and http://127.0.0.1:32773 », le fait de visiter ces URL maintenant entraînera une erreur. À partir de Drupal 8, le noyau de Drupal et les modules contrib fonctionnent comme des dépendances. Par conséquent, vous devez d’abord terminer l’installation de Drupal à l’aide de Composer, le gestionnaire de paquets pour les projets PHP, avant que tout ne se charge dans votre navigateur web.

      L’une des caractéristiques les plus utiles et les plus élégantes de DDEV est que vous pouvez passer les commandes de Composer par le CLI de DDEV et dans votre environnement conteneurisé. Cela signifie que vous pouvez séparer la configuration spécifique de votre machine de votre environnement de développement. Vous n’avez plus à gérer les différents problèmes de chemin de fichier, de dépendance et de version qui accompagnent généralement le développement local de PHP. De plus, vous pouvez rapidement changer de contexte entre plusieurs projets utilisant différents cadres et piles techniques avec un minimum d’effort.

      Utilisez la commande ddev composer pour télécharger drupal/recommended-project. Cela permettra de télécharger le noyau de Drupal, ses bibliothèques et d’autres ressources connexes, puis de créer un projet par défaut :

      • ddev composer create "drupal/recommended-project"

      Téléchargez maintenant un dernier composant appelé Drush, ou Drupal Shell. Ce tutoriel n’utilisera qu’une seule commande drush, et ce tutoriel fournit une alternative, mais drush est un CLI puissant pour le développement de Drupal qui peut améliorer votre efficacité.

      Utilisez ddev composer pour installer drush :

      • ddev composer require "drush/drush"

      Vous avez maintenant construit un projet Drupal 9 par défaut et installé drush. Vous allez maintenant visualiser votre projet dans un navigateur et configurer les paramètres de votre site web.

      Étape 3 — Configuration de votre projet Drupal 9

      Maintenant que vous avez installé Drupal 9, vous pouvez visiter votre nouveau projet dans votre navigateur. Pour ce faire, vous pouvez relancer ddev start et copier l’une des deux URL qu’il produit, ou vous pouvez utiliser la commande suivante, qui lancera automatiquement votre site dans une nouvelle fenêtre de navigateur :

      Vous y trouverez l’assistant d’installation standard de Drupal.

      Installateur Drupal 9 à partir du navigateur

      Vous avez ici deux possibilités. Vous pouvez utiliser cette interface utilisateur et suivre l’assistant tout au long de l’installation, ou vous pouvez retourner à votre terminal et passer une commande drush via ddev. Cette dernière option automatisera le processus d’installation et définira admin comme votre nom d’utilisateur et votre mot de passe.

      Option 1 — Utiliser l’assistant

      Retournez à l’assistant dans votre navigateur. Sous Choose language, sélectionnez une langue dans le menu déroulant et cliquez sur Save and continue. Sélectionnez maintenant un profil d’installation. Vous pouvez choisir entre Standard , Minimal , et Demo. Faites votre choix, puis cliquez sur Save and continue.  Drupal vérifiera automatiquement vos besoins, mettra en place une base de données et installera votre site. La dernière étape consiste à personnaliser quelques configurations. Ajoutez un nom de site et une adresse électronique de site qui se termine par votre domaine. Choisissez ensuite un nom d’utilisateur et un mot de passe. Choisissez un mot de passe fort et conservez vos informations d’identification dans un endroit sûr. Enfin, ajoutez une adresse électronique privée que vous vérifiez régulièrement, remplissez les paramètres régionaux, puis appuyez sur Save and continue.

      Message de bienvenue de Drupal 9 avec un avertissement sur les autorisations

      Votre nouveau site sera chargé avec un message de bienvenue.

      Option 2 — Utilisation de la ligne de commande

      Depuis le répertoire root de votre projet, lancez la commande ddev exec pour installer un site Drupal par défaut en utilisant drush :

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Votre site sera créé de la même manière que l’assistant, mais avec quelques configurations standard. Votre nom d’utilisateur et votre mot de passe seront admin.

      Lancez maintenant le site pour le visualiser dans votre navigateur :

      Vous êtes maintenant prêt à commencer à construire votre site web, mais il est considéré comme une bonne pratique de vérifier que vos autorisations sont correctes pour le répertoire /sites/web/default. Lorsque vous travaillez localement, ce n’est pas une préoccupation importante, mais si vous transférez ces autorisations à un serveur de production, elles poseront un risque de sécurité.

      Étape 4 — Vérifier vos autorisations

      Pendant l’installation de l’assistant, ou lors du premier chargement de votre page d’accueil, vous pouvez voir un avertissement concernant les paramètres des permissions dans votre répertoire /sites/web/default et un fichier à l’intérieur de ce répertoire : settings.php.

      Après l’exécution du script d’installation, Drupal essaiera de définir les permissions read et execute pour le répertoire web/sites/default, pour tous les groupes : il s’agit d’un paramètre de permissions 555. read only, ou 444. Si vous rencontrez cet avertissement, exécutez ces deux commandes `chmod` du répertoire root de votre projet. Tout manquement à cette obligation constitue un risque pour la sécurité :

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Pour vérifier que vous avez les bonnes autorisations, exécutez la commande ls avec les boutons a , l , h et d :

      • ls -alhd web/sites/default web/sites/default/settings.php

      Vérifiez que vos autorisations correspondent à la sortie suivante :

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Vous êtes maintenant prêt(e) à développer un site web Drupal 9 sur votre machine locale.

      Étape 5 — Créer votre premier article dans Drupal

      Pour tester certaines des fonctionnalités de Drupal, vous allez maintenant créer un message en utilisant l’interface utilisateur du web.

      Depuis la page initiale de votre site, cliquez sur le bouton Content dans le menu supérieur à gauche. Cliquez maintenant sur le bouton bleu add content. Une nouvelle page apparaîtra. Cliquez sur Article, et une autre page apparaîtra.

      Drupal 9 Créer une invite d'article  

      Ajoutez le titre et le contenu que vous souhaitez. Vous pouvez également ajouter une image, comme l’un des fonds d’écran de DigitalOcean . Lorsque vous êtes prêt, cliquez sur le bouton bleu save.

      Votre premier article apparaîtra sur votre site web.

      Création d'article par Drupal 9  

      Vous développez maintenant un site web Drupal 9 sur votre machine locale sans jamais interagir avec un serveur grâce à Docker et DDEV. Dans l’étape suivante, vous gérerez le conteneur DDEV afin d’adapter votre flux de travail.

      Étape 6 — Gérer le conteneur DDEV

      Lorsque vous avez terminé le développement de votre projet, ou lorsque vous souhaitez faire une pause, vous pouvez arrêter votre conteneur DDEV sans vous soucier de la perte de données. DDEV peut gérer un changement rapide de contexte parmi de nombreux projets ; c’est l’une de ses caractéristiques les plus utiles. Votre code et vos données sont toujours conservés dans le répertoire de votre projet, même après que vous ayez arrêté ou supprimé le conteneur DDEV.

      Pour libérer des ressources, vous pouvez arrêter DDEV à tout moment. Depuis le répertoire root de votre projet, exécutez la commande suivante :

      DDEV est disponible dans le monde entier, vous pouvez donc exécuter des commandes ddev depuis n’importe quel endroit, à condition de spécifier le projet DDEV :

      Vous pouvez également consulter tous vos projets en même temps en utilisant ddev list :

      DDEV comprend de nombreuses autres commandes utiles.

      Vous pouvez à tout moment relancer DDEV et continuer à vous développer localement.

      Conclusion

      Dans ce tutoriel, vous avez utilisé Docker et la puissance de la conteneurisation pour développer un site Drupal localement, avec l’aide de DDEV. DDEV s’intègre également bien avec de nombreux EDI et fournit un débogage PHP intégré pour Atom, PHPStorm et Visual Studio Code (vscode). Vous pouvez également en apprendre davantage sur la création d’environnements de développement pour Drupal avec DDEV ou sur le développement d’autres cadres PHP comme WordPress .



      Source link