|
| 1 | +# π Docsify Documentation Site |
| 2 | + |
| 3 | +This folder contains the Docsify-powered documentation site for the Ultimate DevOps Real-World Project course. |
| 4 | + |
| 5 | +## π Live Site |
| 6 | + |
| 7 | +**Production URL:** https://stacksimplify.github.io/devops-real-world-project-implementation-on-aws/ |
| 8 | + |
| 9 | +## π Structure |
| 10 | + |
| 11 | +``` |
| 12 | +docs/ |
| 13 | +βββ index.html # Main Docsify configuration |
| 14 | +βββ _coverpage.md # Landing page/cover |
| 15 | +βββ _sidebar.md # Navigation sidebar (auto-generated) |
| 16 | +βββ .nojekyll # GitHub Pages configuration |
| 17 | +βββ README.md # This file |
| 18 | +``` |
| 19 | + |
| 20 | +## π Auto-Generation |
| 21 | + |
| 22 | +The sidebar (`_sidebar.md`) is **automatically generated** from the repository structure using `generate_sidebar.py` in the root directory. |
| 23 | + |
| 24 | +### When Sidebar Updates |
| 25 | + |
| 26 | +The sidebar is regenerated automatically via GitHub Actions when: |
| 27 | +- Any README.md file is added, modified, or deleted |
| 28 | +- New course sections are added |
| 29 | +- The `generate_sidebar.py` script is updated |
| 30 | +- Manual trigger from GitHub Actions |
| 31 | + |
| 32 | +### Manual Regeneration |
| 33 | + |
| 34 | +To manually regenerate the sidebar: |
| 35 | + |
| 36 | +```bash |
| 37 | +# From repository root |
| 38 | +python generate_sidebar.py |
| 39 | +``` |
| 40 | + |
| 41 | +## π¨ Customization |
| 42 | + |
| 43 | +### Styling |
| 44 | + |
| 45 | +All styling is in `index.html` within the `<style>` tag. Key CSS variables: |
| 46 | + |
| 47 | +```css |
| 48 | +:root { |
| 49 | + --theme-color: #FF6B35; /* Primary brand color */ |
| 50 | + --theme-color-dark: #E85D2A; /* Darker shade */ |
| 51 | + --theme-color-light: #FF8C61; /* Lighter shade */ |
| 52 | + --sidebar-width: 300px; /* Sidebar width */ |
| 53 | +} |
| 54 | +``` |
| 55 | + |
| 56 | +### Plugins |
| 57 | + |
| 58 | +Currently enabled plugins: |
| 59 | +- β
Search (full-text search across all content) |
| 60 | +- β
Pagination (prev/next navigation) |
| 61 | +- β
Copy Code (copy button for code blocks) |
| 62 | +- β
Zoom Image (click to zoom images) |
| 63 | +- β
Emoji (emoji support) |
| 64 | +- β
Syntax Highlighting (for multiple languages) |
| 65 | + |
| 66 | +To add more plugins, add the script tag in `index.html`. |
| 67 | + |
| 68 | +### Cover Page |
| 69 | + |
| 70 | +Edit `_coverpage.md` to update: |
| 71 | +- Course description |
| 72 | +- Key features |
| 73 | +- Statistics |
| 74 | +- Call-to-action buttons |
| 75 | + |
| 76 | +## π Local Development |
| 77 | + |
| 78 | +### Option 1: Using Docsify CLI (Recommended) |
| 79 | + |
| 80 | +```bash |
| 81 | +# Install docsify-cli globally |
| 82 | +npm i docsify-cli -g |
| 83 | + |
| 84 | +# Serve the docs locally |
| 85 | +cd docs |
| 86 | +docsify serve |
| 87 | + |
| 88 | +# Open http://localhost:3000 |
| 89 | +``` |
| 90 | + |
| 91 | +### Option 2: Using Python HTTP Server |
| 92 | + |
| 93 | +```bash |
| 94 | +# From docs directory |
| 95 | +python -m http.server 3000 |
| 96 | + |
| 97 | +# Open http://localhost:3000 |
| 98 | +``` |
| 99 | + |
| 100 | +### Option 3: Using VS Code Live Server |
| 101 | + |
| 102 | +1. Install "Live Server" extension in VS Code |
| 103 | +2. Right-click on `docs/index.html` |
| 104 | +3. Select "Open with Live Server" |
| 105 | + |
| 106 | +## π Content Management |
| 107 | + |
| 108 | +### Adding New Sections |
| 109 | + |
| 110 | +1. Create your section folder in repo root (e.g., `19_NEW_SECTION/`) |
| 111 | +2. Add README.md files in subdirectories |
| 112 | +3. Update `SECTIONS` list in `generate_sidebar.py` |
| 113 | +4. Commit and push - sidebar auto-updates! |
| 114 | + |
| 115 | +### Best Practices |
| 116 | + |
| 117 | +- β
Keep README.md files focused and well-structured |
| 118 | +- β
Use relative links within README files |
| 119 | +- β
Include images in appropriate folders |
| 120 | +- β
Use markdown features (tables, code blocks, lists) |
| 121 | +- β
Add emojis for visual appeal |
| 122 | +- β Don't edit `_sidebar.md` manually (it's auto-generated) |
| 123 | + |
| 124 | +## π Search Configuration |
| 125 | + |
| 126 | +Search is configured to: |
| 127 | +- Index all content automatically |
| 128 | +- Cache for 1 day (improves performance) |
| 129 | +- Search depth of 6 levels |
| 130 | +- Highlight matches |
| 131 | +- Show context around matches |
| 132 | + |
| 133 | +## π± Mobile Responsiveness |
| 134 | + |
| 135 | +The site is fully responsive and works great on: |
| 136 | +- π± Mobile phones |
| 137 | +- π± Tablets |
| 138 | +- π» Laptops |
| 139 | +- π₯οΈ Desktop monitors |
| 140 | + |
| 141 | +## π Troubleshooting |
| 142 | + |
| 143 | +### Sidebar not updating |
| 144 | + |
| 145 | +```bash |
| 146 | +# Manually regenerate |
| 147 | +python generate_sidebar.py |
| 148 | + |
| 149 | +# Check GitHub Actions logs |
| 150 | +# Go to: Repository β Actions β Deploy Docsify Documentation |
| 151 | +``` |
| 152 | + |
| 153 | +### Images not loading |
| 154 | + |
| 155 | +Ensure image paths are correct: |
| 156 | +```markdown |
| 157 | +<!-- Relative to README location --> |
| 158 | + |
| 159 | + |
| 160 | +<!-- Absolute from docs root --> |
| 161 | + |
| 162 | +``` |
| 163 | + |
| 164 | +### 404 errors |
| 165 | + |
| 166 | +- Ensure `.nojekyll` file exists in docs folder |
| 167 | +- Check that file paths match exactly (case-sensitive) |
| 168 | +- Verify GitHub Pages is enabled in repo settings |
| 169 | + |
| 170 | +## π οΈ Advanced Configuration |
| 171 | + |
| 172 | +### Adding Google Analytics |
| 173 | + |
| 174 | +Edit `index.html` and uncomment the Google Analytics section: |
| 175 | + |
| 176 | +```html |
| 177 | +<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-GA-ID"></script> |
| 178 | +<script> |
| 179 | + window.dataLayer = window.dataLayer || []; |
| 180 | + function gtag(){dataLayer.push(arguments);} |
| 181 | + gtag('js', new Date()); |
| 182 | + gtag('config', 'YOUR-GA-ID'); |
| 183 | +</script> |
| 184 | +``` |
| 185 | + |
| 186 | +### Custom Domain |
| 187 | + |
| 188 | +To use a custom domain: |
| 189 | + |
| 190 | +1. Add CNAME file in docs folder: |
| 191 | + ``` |
| 192 | + docs.stacksimplify.com |
| 193 | + ``` |
| 194 | + |
| 195 | +2. Configure DNS with your provider: |
| 196 | + ``` |
| 197 | + CNAME docs.stacksimplify.com stacksimplify.github.io |
| 198 | + ``` |
| 199 | + |
| 200 | +3. Enable custom domain in GitHub Pages settings |
| 201 | + |
| 202 | +## π Performance |
| 203 | + |
| 204 | +The site is optimized for performance: |
| 205 | +- β
No build step required (instant updates) |
| 206 | +- β
CDN-hosted assets |
| 207 | +- β
Lazy loading of content |
| 208 | +- β
Search index caching |
| 209 | +- β
Minimal JavaScript |
| 210 | + |
| 211 | +## π€ Contributing |
| 212 | + |
| 213 | +To contribute to the documentation: |
| 214 | + |
| 215 | +1. Edit relevant README.md files in course sections |
| 216 | +2. Test locally using `docsify serve` |
| 217 | +3. Commit and push changes |
| 218 | +4. GitHub Actions will auto-deploy |
| 219 | + |
| 220 | +## π Resources |
| 221 | + |
| 222 | +- [Docsify Documentation](https://docsify.js.org/) |
| 223 | +- [Docsify Themes](https://docsify.js.org/#/themes) |
| 224 | +- [Docsify Plugins](https://docsify.js.org/#/plugins) |
| 225 | +- [Markdown Guide](https://www.markdownguide.org/) |
| 226 | + |
| 227 | +## π§ Support |
| 228 | + |
| 229 | +For issues or questions: |
| 230 | +- π§ Email: support@stacksimplify.com |
| 231 | +- π GitHub Issues: [Create an issue](https://github.com/stacksimplify/devops-real-world-project-implementation-on-aws/issues) |
| 232 | +- π¬ LinkedIn: [Kalyan Reddy Daida](https://www.linkedin.com/in/kalyan-reddy-daida/) |
| 233 | + |
| 234 | +--- |
| 235 | + |
| 236 | +Made with β€οΈ by [Stack Simplify](https://stacksimplify.com) |
0 commit comments