|
1 | 1 | --- |
2 | | -slug: welcome |
3 | | -title: Welcome |
4 | | -authors: [slorber, yangshun] |
5 | | -tags: [facebook, hello, docusaurus] |
| 2 | +slug: my-first-docusaurus-app |
| 3 | +title: My First Docusaurus App |
| 4 | +authors: [basit] |
| 5 | +tags: [docusaurus, static-site, github-pages, nodejs] |
6 | 6 | --- |
7 | 7 |
|
8 | | -[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog). |
| 8 | +# My First Docusaurus App |
9 | 9 |
|
10 | | -Here are a few tips you might find useful. |
| 10 | +Hello everyone! 👋 Today, I’m thrilled to share my experience creating my first app using **Docusaurus**, a static site generator that simplifies building, deploying, and maintaining websites. |
11 | 11 |
|
12 | | -<!-- truncate --> |
| 12 | +## 🎉 Getting Started |
13 | 13 |
|
14 | | -Simply add Markdown files (or folders) to the `blog` directory. |
| 14 | +To start, I ran the following script to create my app: |
15 | 15 |
|
16 | | -Regular blog authors can be added to `authors.yml`. |
| 16 | +```bash |
| 17 | +npx create-docusaurus@latest basitjamil classic |
| 18 | +``` |
17 | 19 |
|
18 | | -The blog post date can be extracted from filenames, such as: |
| 20 | +This command initialized a project in a directory called basitjamil using the classic preset. It comes with pre-configured templates and settings, making it beginner-friendly and perfect for building feature-rich websites. |
19 | 21 |
|
20 | | -- `2019-05-30-welcome.md` |
21 | | -- `2019-05-30-welcome/index.md` |
| 22 | +## 🚀 Hosting on GitHub Pages |
22 | 23 |
|
23 | | -A blog post folder can be convenient to co-locate blog post images: |
| 24 | +I also wanted to deploy my app on GitHub Pages. Here’s the workflow I used to automate deployment: |
24 | 25 |
|
25 | | - |
| 26 | +```yaml |
| 27 | +# Simple workflow for deploying static content to GitHub Pages |
| 28 | +name: Deploy static content to Pages |
26 | 29 |
|
27 | | -The blog supports tags as well! |
| 30 | +on: |
| 31 | + push: |
| 32 | + branches: ["master"] |
28 | 33 |
|
29 | | -**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config. |
| 34 | + workflow_dispatch: |
| 35 | + |
| 36 | +permissions: |
| 37 | + contents: read |
| 38 | + pages: write |
| 39 | + id-token: write |
| 40 | + |
| 41 | +concurrency: |
| 42 | + group: "pages" |
| 43 | + cancel-in-progress: false |
| 44 | + |
| 45 | +env: |
| 46 | + NODE_OPTIONS: --max-old-space-size=6144 |
| 47 | + |
| 48 | +jobs: |
| 49 | + deploy: |
| 50 | + environment: |
| 51 | + name: github-pages |
| 52 | + url: ${{ steps.deployment.outputs.page_url }} |
| 53 | + runs-on: ubuntu-latest |
| 54 | + steps: |
| 55 | + - name: Checkout |
| 56 | + uses: actions/checkout@v4 |
| 57 | + |
| 58 | + - name: Set up Node.js |
| 59 | + uses: actions/setup-node@v3 |
| 60 | + with: |
| 61 | + node-version: 18 |
| 62 | + |
| 63 | + - name: Install dependencies |
| 64 | + run: npm install |
| 65 | + |
| 66 | + - name: Build site |
| 67 | + run: npm run build |
| 68 | + |
| 69 | + - name: Setup Pages |
| 70 | + uses: actions/configure-pages@v5 |
| 71 | + |
| 72 | + - name: Upload artifact |
| 73 | + uses: actions/upload-pages-artifact@v3 |
| 74 | + with: |
| 75 | + path: "build" |
| 76 | + |
| 77 | + - name: Deploy to GitHub Pages |
| 78 | + id: deployment |
| 79 | + uses: actions/deploy-pages@v4 |
| 80 | + |
| 81 | +``` |
| 82 | + |
| 83 | +This workflow ensures that every time I push changes to the master branch, my site gets built and deployed automatically to GitHub Pages. Isn’t that awesome? 🎉 |
| 84 | + |
| 85 | +## 💡 My Learnings |
| 86 | + |
| 87 | +Here are some of the key things I learned during this process: |
| 88 | + |
| 89 | +Docusaurus is a great tool for creating developer-friendly documentation or static sites. |
| 90 | +Automating deployments using GitHub Actions saves a lot of time and effort. |
| 91 | +Hosting on GitHub Pages is seamless and perfect for open-source projects. |
| 92 | +🌐 Check It Out! |
| 93 | + |
| 94 | +You can check out my live site here: [Basit Jamil](https://chbasitgill.github.io/basitjamil/). |
0 commit comments