Home NewsX Deploy Mkdocs page on Azure Web App

Deploy Mkdocs page on Azure Web App

by info.odysseyx@gmail.com
0 comment 3 views


MkDocs is a simple static site generator geared toward creating project documentation. The document source file is written in Markdown and consists of a single YAML configuration file.

This tutorial shows how to host a Mkdocs project dynamically or statically. You can choose either method to publish your project depending on your needs; the two approaches are independent of each other.

index:

Dynamic hosting of your development environment

Step 1:

Open an empty folder using VSCode. Launch a terminal and enter the following command to create a Python virtual environment and switch the current session to this environment.

theringe_0-1729159497211.png

windows

python -m venv .venv
.\.venv\Scripts\Activate.ps1

linux

python -m venv .venv
source .venv/Scripts/activate

Step 2:

Enter the following command to create a Mkdocs project (e.g. my-project), switch to the project directory, and start the project. You can then visit the project page in your browser. http://127.0.0.1:8000.

pip install mkdocs
mkdocs new my-project
cd my-project
mkdocs serve

theringe_1-1729159581417.png


Static hosting of your development environment

Step 1:

When a project is created in a development environment, the originally displayed pages must be rendered using Python and the Mkdocs package. You can run the following command to build these pages as pure static HTML and deploy them to a static website hosting service, such as Azure Static Websites or Azure Web Apps featured here.

Once the project is built, you can find the corresponding static web page in the newly created site subfolder. You can view the project pages by opening index.html in your browser.

theringe_2-1729159601830.png

mkdocs build


Dynamic way: Using a Python web app

Step 1:

Create a Linux Python web app on Azure.

theringe_4-1729159692922.png

Step 2:

Using VSCode, add two files: “mkdocs.sh” and “.deployment” to the root directory of your project.

theringe_6-1729159824329.png

mkdocs.sh

pip install mkdocs
cd /home/site/wwwroot/my-project/
mkdocs serve -a 0.0.0.0:8000

.deployment

[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=false

Step 3:

Using VSCode, deploy the root directory of your project into the Python app you just created.

theringe_9-1729159911835.png

Step 4:

Find your Python app in Azure, modify the launch command as follows, and then restart the app:

theringe_11-1729159972203.png

bash /home/site/wwwroot/mkdocs.sh

theringe_12-1729159972204.png

Step 5:

Make sure your project is running correctly.

theringe_15-1729160040411.png


Static Method: Using Node Web App

Step 1:

Create a Linux node web app in Azure.

theringe_5-1729159716245.png

Step 2:

In the project’s Mkdocs subfolder, locate the site folder and add a .deployment file within it.

theringe_7-1729159849251.png

.deployment

[config]
SCM_DO_BUILD_DURING_DEPLOYMENT=false

Step 3:

Using VSCode, deploy the project’s “site” subdirectory into the Node app you just created.

theringe_10-1729159931507.png

Step 4:

Find the Node app in Azure, modify the launch command, and restart the app.

theringe_13-1729160009129.png

pm2 serve /home/site/wwwroot --no-daemon

theringe_14-1729160009130.png

Step 5:

Make sure your project is running correctly.

theringe_16-1729160056176.png

Static way: Use a static web app

Step 0:

You can create a GitHub repository for the entire project folder (e.g., name it mkdocs-app), or choose to upload only the “site” subdirectory as needed. For this example, we will use the entire project folder.

theringe_0-1729218289813.png

Step 1:

Create a static web app in Azure and specify the project’s GitHub repository and its branch during the process. You also need to rename it to “mkdocs project” (e.g. my-project) and set the app location/output location to:

./my-project/site

theringe_1-1729218307095.png

Step 2:

Once your SWA is created, you can check its deployment status in the GitHub repository. Once deployment is complete, you can view the actual page.

theringe_2-1729218359079.png

Step 3:

Make sure your project is running properly.

theringe_3-1729218371692.png

References

MkDocs

Azure Linux web app and http server – Microsoft Community Hub

Quickstart: Building your first static web app | microsoft run





Source link

You may also like

Leave a Comment

Our Company

Welcome to OdysseyX, your one-stop destination for the latest news and opportunities across various domains.

Newsletter

Subscribe my Newsletter for new blog posts, tips & new photos. Let's stay updated!

Laest News

@2024 – All Right Reserved. Designed and Developed by OdysseyX