Skip to content

Commit

Permalink
edit step-by-step to correct typos
Browse files Browse the repository at this point in the history
  • Loading branch information
szalbuque committed Jan 24, 2024
1 parent 27dbcd9 commit 9260e7e
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 41 deletions.
12 changes: 6 additions & 6 deletions docs/index.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# Introduction

## Problem statement
You want to create a documentation portal which has a good design, but you want to focus only on the content, not on the design itself.
Also, you want this documentation portal to be automaticaly updated whenever you commit something to a GitHub repository.
## Problem Statement
You want to create a documentation portal that has a good design, but you want to focus only on the content, not on the design itself.
You also, you want this documentation portal to be updated automatically whenever you commit something to a GitHub repository.

## Solution
Use [MkDocs](https://www.mkdocs.org) to generate the documentation portal website. Publish the website using [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site). Automate the updating with [GitHub Actions](https://docs.github.com/en/actions/quickstart).
Use [MkDocs](https://www.mkdocs.org) to create the documentation portal website. Publish the website using [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site). Automate updates using [GitHub Actions](https://docs.github.com/en/actions/quickstart).

## See the tutorial
Click on [Step-by-step](./step-by-step.md) to go directly to the tutorial.
Click [Step-by-step](./step-by-step.md) to go directly to the tutorial.

## Learn more
Click on [References](./references.md) to access more information about these tools.
Click on [References](./references.md) to learn more about these tools.

## Author
Silvia Z. Rocha<br>
Expand Down
70 changes: 35 additions & 35 deletions docs/step-by-step.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,58 +6,58 @@
- VsCode

## Assumptions
This tutorial assumes:
This tutorial assumes that:

* You are using a computer with Windows 10 or superior;<br>
* You are using a computer running Windows 10 or higher;<br>
* You already have a GitHub profile. Click [here](https://docs.github.com/en/get-started/quickstart/creating-an-account-on-github) to learn how to create a GitHub profile.

## Create new GitHub repository
* Click [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories) to learn how to create a new repository in GitHub.
- Repository I created for this project: [https://github.com/szalbuque/mkdocs-githubpages-docs-automation.git](https://github.com/szalbuque/mkdocs-githubpages-docs-automation.git).
## Create a new GitHub repository
* Click [here](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories) to learn how to create a new repository on GitHub.
- The repository I created for this project is: [https://github.com/szalbuque/mkdocs-githubpages-docs-automation.git](https://github.com/szalbuque/mkdocs-githubpages-docs-automation.git).

## Clone the GitHub repository to your machine
- In VSCode, click on `File > Open folder` and choose the folder to host the clone of the GitHub repository.
## Clone the GitHub repository to your computer
- In VSCode, click on `File > Open folder` and select the folder to host the clone of the GitHub repository.
- Click on `Terminal > New Terminal` to open a new terminal in VSCode.
- Use the command `git clone` to create a copy of the GitHub repository into the selected folder.
- Use the `git clone` command to create a copy of the GitHub repository into the selected folder.
- See the example below.
```
git clone https://github.com/szalbuque/mkdocs-githubpages-docs-automation.git
```
- In this example I used my repository. You must use the repository you created.
- In this example I used my repository. You need to use the repository you created.
- Click [here](https://docs.github.com/pt/repositories/creating-and-managing-repositories/cloning-a-repository) to learn how to clone a GitHub repository.

## Install MkDocs
- MkDocs requires a recent version of Python and the Python package manager, <i>pip</i>, to be installed on your machine. See [this page](https://www.mkdocs.org/user-guide/installation/#mkdocs-installation) to know how to meet this requirements .
- MkDocs requires a recent version of Python and the Python package manager, <i>pip</i>, to be installed on your machine. See [this page](https://www.mkdocs.org/user-guide/installation/#mkdocs-installation) for information on how to meet these requirements .

!!! warning

If you have problems activating the Python Virtual
Environment (venv), make sure you have the necessary
permissions to execute scripts. See [this page](https://learn.microsoft.com/pt-pt/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.4)
permissions to run scripts. See [this page](https://learn.microsoft.com/pt-pt/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.4)
to learn more about these permissions.

## Create a new MkDocs Website
* In VSCode, open the folder containing the clone of the GitHub repository you created.
## Create a new MkDocs website
* In VSCode, open the folder that contains the clone of the GitHub repository you created.
* Open a new terminal `(Terminal > New Terminal)`.
* Use the commands below to create and activate the Python Virtual Environment (venv):
* Use the following below to create and activate the Python Virtual Environment (venv):
```
python -m venv venv
.\venv\Scripts\activate.ps1
```

* Run the command below to create a new MkDocs Website:
* Run the following command to create a new MkDocs website:
```
mkdocs new .
```
* MkDocs creates two files:
* MkDocs will create two files:

| Description | File |
|-------------|------|
| Contains the configurations for creating the website. | .\mkdocs.yml |
| Contains an example of content. | .\docs\index.md |
| Contains a sample content. | .\docs\index.md |

## Launch the MkDocs server
* Run the command below to launch the local server for the new website created:
## Start the MkDocs server
* Run the following command to start the local server for the newly created website:
```
mkdocs serve
```
Expand All @@ -72,11 +72,11 @@ theme:
```
!!! warning

In YML files you must use exact number of spaces before each line. You must read the MkDocs documentation to learn how to configure the mkdocs.yml file.
In YML files you must use the exact number of spaces before each line. You must read the MkDocs documentation to learn how to configure the mkdocs.yml file.
* Refresh the page [http://127.0.0.1:8000/](http://127.0.0.1:8000/) in your browser and see what changes.

## Customize MkDocs features
* Add the lines below to mkdocs.yml file, then save the file and refresh the browser to see the modifications in the navigation bar and colors.
* Add the following lines to the <i>mkdocs.yml</i> file, then save the file and refresh the browser to see the changes in the navigation bar and colors.
```
site_name: MkDocs with GitHub Pages Tutorial
theme:
Expand Down Expand Up @@ -106,23 +106,23 @@ theme:
primary: teal
accent: lime
```
## Create a new page inside the website
* Inside the docs folder, create a new file named page2.md
* Add this line to page2.md file and save it:
## Create a new page within the website
* In the <i>docs</i> folder, create a new file named <i>page2.md</i>
* Add this line to the <i>page2.md</i> file and save it:

```
This is page 2
```

* Refresh the browser and see the link to page2 created in the navigation bar.
* Click on the link page2 and see the new page you created.
* Click on the page2 link and see the new page you created.

## Publish the documentation portal on GitHub Pages
## Publish your documentation portal to GitHub Pages
### Prepare the local repository
* Create the folder <i>.github</i> inside the main folder of the project.
* Create the folder inside the folder .<i>github</i>.
* Create the file <i>ci.yml</i> inside the folder <i>workflows</i>.
* Copy the content below inside the file <i>ci.yml</i> and save it.
* Create the folder <i>.github</i> inside your project´s root folder.
* Create the folder <i>workflows</i> inside the <i>.github</i> folder.
* Create the <i>ci.yml</i> file inside the <i>workflows</i> folder.
* Copy the following content into the <i>ci.yml</i> file and save it.

(1) See more...
{ .annotate }
Expand Down Expand Up @@ -157,24 +157,24 @@ jobs:

### Update the GitHub repository
* Open a new terminal in VSCode.
* Use the commands below to push the files to the repository:
* Use the following commands to push the files to the repository:
```
git add .
git commit -m "initial commit"
git push origin main
```

### Configure GitHub to create a GitHub Page
* Enter the repository of this project in GitHub website.
* Enter the repository for this project on the GitHub website.
* Click on the `Settings` option, on the navigation bar.
* Click on the `Pages` option, on the left side menu.
* Select the `Source` option `Deploy from a branch`.
* Under `Branch` subtitle, select the branch `gh-pages`.
* Select `/(root)` folder and click `Save`.
* After you click on `Save`, the GitHub Actions begins the execute the workflow.
* After you click on `Save`, the GitHub Actions will begin executing the workflow.

* To see the workflow, click on `Actions` in the navigation bar.
* Click on the link `pages-build-deployment` to see the URL of the website published.
* To view the workflow, click on `Actions` in the navigation bar.
* Click `pages-build-deployment` link to see the URL of the published site.



Expand Down

0 comments on commit 9260e7e

Please sign in to comment.