| <!doctype html> |
| <html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-current plugin-docs plugin-id-default docs-doc-id-index" data-has-hydrated="false"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="generator" content="Docusaurus v2.4.3"> |
| <title data-rh="true">Website Dev Guide | Apache CloudStack</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://cloudstack.apache.org/website-guide/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Website Dev Guide | Apache CloudStack"><meta data-rh="true" name="description" content="This is a website and blog development guide which can be used as a reference to"><meta data-rh="true" property="og:description" content="This is a website and blog development guide which can be used as a reference to"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://cloudstack.apache.org/website-guide/"><link data-rh="true" rel="alternate" href="https://cloudstack.apache.org/website-guide/" hreflang="en"><link data-rh="true" rel="alternate" href="https://cloudstack.apache.org/website-guide/" hreflang="x-default"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Apache CloudStack RSS Feed"> |
| <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Apache CloudStack Atom Feed"> |
| |
| |
| |
| |
| |
| |
| <script src="scripts/bootstrap.bundle.min.js" async></script><link rel="stylesheet" href="/assets/css/styles.e12efb83.css"> |
| <link rel="preload" href="/assets/js/runtime~main.60ecdf28.js" as="script"> |
| <link rel="preload" href="/assets/js/main.2d60fa8d.js" as="script"> |
| </head> |
| <body class="navigation-with-keyboard"> |
| <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus"> |
| <div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/navlogo.png" alt="apache-cloudstack" class="themedImage_ToTc themedImage--light_HNdA"><img src="/img/navlogo.png" alt="apache-cloudstack" class="themedImage_ToTc themedImage--dark_i4oU"></div><b class="navbar__title text--truncate"></b></a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">About</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/about">About</a></li><li><a class="dropdown__link" href="/history">History</a></li><li><a class="dropdown__link" href="/features">Features</a></li><li><a class="dropdown__link" href="/who">Who We Are</a></li><li><a class="dropdown__link" href="/bylaws">Community Bylaws</a></li><li><a class="dropdown__link" href="/trademark-guidelines">Trademark Guidelines</a></li><li><a class="dropdown__link" href="/security">Security</a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">Community</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/contribute">Get Involved</a></li><li><a class="dropdown__link" href="/developers">Developer Resources</a></li><li><a class="dropdown__link" href="/mailing-lists">Join Mailing Lists</a></li><li><a href="https://github.com/apache/cloudstack/issues" target="_blank" rel="noopener noreferrer" class="dropdown__link">Issues Tracker<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://join.slack.com/t/apachecloudstack/shared_invite/zt-1u8qwbivp-u16HRI~LWioLmF1G2D3Iyg" target="_blank" rel="noopener noreferrer" class="dropdown__link">Community Slack<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a class="dropdown__link" href="/events">Events and Meetups</a></li><li><a href="https://www.cloudstackcollab.org/" target="_blank" rel="noopener noreferrer" class="dropdown__link">Collab Conference<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">Use Cases</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/cloud-builders">Cloud Builders</a></li><li><a class="dropdown__link" href="/kubernetes">Kubernetes</a></li><li><a class="dropdown__link" href="/integrations">Integrations</a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">Users</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/users">Known Users</a></li><li><a class="dropdown__link" href="/website-guide/blog/tags/case-studies">Case Studies</a></li><li><a href="https://docs.google.com/forms/d/e/1FAIpQLScPHIRetdt-pxPT62IesXMoQUmhQ8ATGKcYZa507mB9uwzn-Q/viewform" target="_blank" rel="noopener noreferrer" class="dropdown__link">Take Survey<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">Documentation</a><ul class="dropdown__menu"><li><a href="https://docs.cloudstack.apache.org" target="_blank" rel="noopener noreferrer" class="dropdown__link">CloudStack Documentation<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://cwiki.apache.org/confluence/display/CLOUDSTACK/Home" target="_blank" rel="noopener noreferrer" class="dropdown__link">Project Wiki<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a href="https://cwiki.apache.org/confluence/display/CLOUDSTACK/CloudStack+Books" target="_blank" rel="noopener noreferrer" class="dropdown__link">CloudStack Books<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li><a class="dropdown__link" href="/api/">API Documentation</a></li></ul></div><a class="navbar__item navbar__link" href="/downloads">Download</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/apache/cloudstack" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="searchBox_ZlJk"><div class="navbar__search searchBarContainer_NW3z"><input placeholder="Search" aria-label="Search" class="navbar__search-input"><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div><div class="searchHintContainer_Pkmr"><kbd class="searchHint_iIMx">ctrl</kbd><kbd class="searchHint_iIMx">K</kbd></div></div></div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">ASF</a><ul class="dropdown__menu"><li><a href="https://www.apache.org/" target="_blank" rel="noopener noreferrer" class="dropdown__link">Foundation</a></li><li><a href="https://www.apache.org/licenses/" target="_blank" rel="noopener noreferrer" class="dropdown__link">License</a></li><li><a href="https://www.apache.org/events/current-event" target="_blank" rel="noopener noreferrer" class="dropdown__link">Events</a></li><li><a href="https://www.apache.org/security/" target="_blank" rel="noopener noreferrer" class="dropdown__link">Security</a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank" rel="noopener noreferrer" class="dropdown__link">Sponsorship</a></li><li><a href="https://www.apache.org/foundation/policies/privacy.html" target="_blank" rel="noopener noreferrer" class="dropdown__link">Privacy</a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank" rel="noopener noreferrer" class="dropdown__link">Thanks</a></li></ul></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0 docsWrapper_BCFX"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docPage__5DB"><aside class="theme-doc-sidebar-container docSidebarContainer_b6E3"><div class="sidebarViewport_Xe31"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/website-guide/">Website Dev Guide</a></li></ul></nav></div></div></aside><main class="docMainContainer_gTbr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Website Dev Guide</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Website Dev Guide</h1></header><p>This is a website and blog development guide which can be used as a reference to |
| allow technical and non-technical contributors to work with the website for |
| adding/editing pages and blog posts.</p><p>Most of the pages and blog posts are written in Markdown, which is like a text |
| file usually ending with <code>.md</code> extension. These .md files are used by Docusaurus |
| (the static-site website framework) to generate HTML-based website so we don't |
| have to write HTML by manually.</p><p>You may co-relate with the source of this (Markdown) page at: |
| <a href="https://github.com/apache/cloudstack-www/blob/main/src/pages/website-guide.md" target="_blank" rel="noopener noreferrer">https://github.com/apache/cloudstack-www/blob/main/src/pages/website-guide.md</a></p><p>For basic Markdown syntax reference, please refer: |
| <a href="https://www.markdownguide.org/basic-syntax/" target="_blank" rel="noopener noreferrer">https://www.markdownguide.org/basic-syntax/</a></p><p>Refer to the following for Docusaurus supported markdown features: |
| <a href="https://docusaurus.io/docs/2.3.1/markdown-features" target="_blank" rel="noopener noreferrer">https://docusaurus.io/docs/2.3.1/markdown-features</a></p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="working-with-the-website-pages-and-blogs">Working with the Website, Pages and Blogs<a href="#working-with-the-website-pages-and-blogs" class="hash-link" aria-label="Direct link to Working with the Website, Pages and Blogs" title="Direct link to Working with the Website, Pages and Blogs"></a></h2><h3 class="anchor anchorWithStickyNavbar_LWe7" id="website">Website<a href="#website" class="hash-link" aria-label="Direct link to Website" title="Direct link to Website"></a></h3><p>Most of the website configuration such as theme, name, logos, menubar, footer |
| etc are configurable using the <code>docusaurus.config.js</code> that you can edit here:</p><p><a href="https://github.com/apache/cloudstack-www/blob/main/docusaurus.config.js" target="_blank" rel="noopener noreferrer">https://github.com/apache/cloudstack-www/blob/main/docusaurus.config.js</a></p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="pages">Pages<a href="#pages" class="hash-link" aria-label="Direct link to Pages" title="Direct link to Pages"></a></h3><p>The various standalone pages are in this directory:</p><p><a href="https://github.com/apache/cloudstack-www/tree/main/src/pages" target="_blank" rel="noopener noreferrer">https://github.com/apache/cloudstack-www/tree/main/src/pages</a></p><p>Here you can use them as examples, on how to create MD or MDX file that build |
| as webpages. You can look at 'learn-more.md' as a reusable page that can be |
| included in other pages such as the homepage index.tsx, cloud-builders.mdx etc.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="blog">Blog<a href="#blog" class="hash-link" aria-label="Direct link to Blog" title="Direct link to Blog"></a></h3><p>To create a new blog, create a directory with naming convention |
| <code>YYYY-MM-DD-slug-url</code>. In this directory you can put in an <code>index.md</code> and other |
| assets such as images, pdfs etc. The .blog-template boilerplate can be used from |
| here:</p><p><a href="https://github.com/apache/cloudstack-www/tree/main/blog/.blog-template" target="_blank" rel="noopener noreferrer">https://github.com/apache/cloudstack-www/tree/main/blog/.blog-template</a></p><p>Use the provided index.md to specify attribute of your blog such as title, tags |
| (categories), authors and the slug (the permalink).</p><p>Having all your blog content and assets in a blog directory makes it easier to |
| work with GitHub's editor and allows you to visually contribute changes.</p><p>You may further read <a href="https://docusaurus.io/docs/blog" target="_blank" rel="noopener noreferrer">https://docusaurus.io/docs/blog</a> for advance changes and |
| refer to the misc section on this page for various components that you case use.</p><p>A common use-case is to have a header file and a way to limit how much of the |
| post shows up on the blog roll. For this, to add read-more we can add a <code><!-- |
| truncate --></code> in your blog post (the index.md file):</p><div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">...blog content...</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"><!-- truncate --></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">...blog content...</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="contributing-changes-using-github">Contributing Changes using GitHub<a href="#contributing-changes-using-github" class="hash-link" aria-label="Direct link to Contributing Changes using GitHub" title="Direct link to Contributing Changes using GitHub"></a></h2><p>Once you've the boilerplate changes done, the steps are:</p><ol><li>If you're a committer, you can edit directly the <code>main</code> branch or create a |
| GitHub branch (optionally in your personally fork) by heading to the |
| <a href="https://github.com/apache/cloudstack-www/branches" target="_blank" rel="noopener noreferrer">branches</a> page:</li></ol><p><img loading="lazy" src="/assets/images/new-branch-4e1e3a81d54280eb7e1ce819bee34a2c.png" width="2680" height="608" class="img_ev3q"></p><ol start="2"><li><p>You may edit any existing page in the <code>src/pages</code> directory or an existing |
| blog in the <code>blog</code> directory, or add new content. If you do this in |
| apache/cloudstack-www repository's <code>main</code> branch then creating a pull request |
| isn't required.</p></li><li><p>To add a new page or create a new blog you can also upload files, for example to |
| add a blog we can use the <code>.blog-template</code>, edit the <code>index.md</code> and add any |
| assets (such as images and pdfs) in a new directory on our computer (say |
| <code>2023-05-10-test-blog</code>):</p></li></ol><p><img loading="lazy" src="/assets/images/new-blog-dir-0136df1cdeb03852891cc5f35620c609.png" width="2202" height="1096" class="img_ev3q"></p><ol start="4"><li>Next, you can drag/drop or select this entire folder in the <code>blog</code> directory |
| of your newly created GitHub branch |
| (<a href="https://github.com/apache/cloudstack-www/tree/new-blog-post/blog" target="_blank" rel="noopener noreferrer">https://github.com/apache/cloudstack-www/tree/new-blog-post/blog</a>):</li></ol><p><img loading="lazy" src="/assets/images/blog-dir-07b05d35e987c1addceef9daf0cdff87.png" width="2792" height="986" class="img_ev3q"></p><p>And, click the commit button to upload the blog post:</p><p><img loading="lazy" src="/assets/images/github-commit-blog-292f690f3c783397e139f02a3f4722c0.png" width="2610" height="1580" class="img_ev3q"></p><ol start="5"><li>Next, open a pull request to get your PR merged (this isn't required if |
| you directly make changes in the <code>main</code> branch). To do this, you go to the |
| branches list and click on the "New pull request" button that's in front of your |
| branch:</li></ol><p><img loading="lazy" src="/assets/images/new-pr-0e05bf1ab5cb4662c071f9c6942cf205.png" width="2656" height="698" class="img_ev3q"></p><p>Next, create the pull request:</p><p><img loading="lazy" src="/assets/images/open-pr-4c802efd02639b43f91532ccd9e28137.png" width="1962" height="1346" class="img_ev3q"></p><ol start="6"><li>If you've opened a PR, a GitHub bot will notify you once it has built the |
| staging website for you to review your changes:</li></ol><p><img loading="lazy" src="/assets/images/github-bot-70bbbe23d3dd7b7be4143dc83f6480b4.png" width="1900" height="370" class="img_ev3q"></p><p>Your changes will be made live on the project website once a committer (or |
| yourself, if you're one) will merge the pull request: (pro-tip - try to always |
| delete your branch after merging)</p><p><img loading="lazy" src="/assets/images/pr-merged-2603034b3df56e86c2f28f45ae6bc4b6.png" width="1962" height="1412" class="img_ev3q"></p><p>If you're making changes directly on the <code>main</code> branch your changes will be made |
| live in a few minutes, for you to verify:</p><p><img loading="lazy" src="/assets/images/test-blog-69f4111bf8aeea567afbd91aeb36c50e.png" width="2220" height="1536" class="img_ev3q"></p><p><strong>That's it!</strong></p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="toc-on-blog-and-website-page">ToC on blog and website page<a href="#toc-on-blog-and-website-page" class="hash-link" aria-label="Direct link to ToC on blog and website page" title="Direct link to ToC on blog and website page"></a></h2><p>If you don't want table of contents show up on right-side of a page/blog, then |
| don't use the Markdown syntax for h2 (##), h3 (###) etc. instead use the HTML |
| <code><h2></code>, <code><h3></code> etc. which will not show the ToC on a page/blog.</p><p>Further reference: <a href="https://docusaurus.io/docs/2.3.1/markdown-features/toc" target="_blank" rel="noopener noreferrer">https://docusaurus.io/docs/2.3.1/markdown-features/toc</a></p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="images">Images<a href="#images" class="hash-link" aria-label="Direct link to Images" title="Direct link to Images"></a></h2><p>We can specify the path related to the <code>static/</code> directory paths, all files |
| in static folder are available from the root of the website such as:</p><div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>Which results in:</p><p><img loading="lazy" src="/assets/images/banner-00cffd639418c48fde1f4c479259e9b6.svg" title="Example image title" width="1484" height="363" class="img_ev3q"></p><p>Further reference: <a href="https://docusaurus.io/docs/2.3.1/markdown-features/assets" target="_blank" rel="noopener noreferrer">https://docusaurus.io/docs/2.3.1/markdown-features/assets</a></p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="buttons">Buttons<a href="#buttons" class="hash-link" aria-label="Direct link to Buttons" title="Direct link to Buttons"></a></h2><p>Here are some example for buttons, shapes and sizes which depends on the class |
| we use in the <code><a></code> tags. Note: for files within the website/blog source |
| folders, always use a target <code>_blank</code>.</p><p>For examples:</p><a href="https://cloudstack.apache.org/" target="_blank" rel="noopener noreferrer" class="button button--primary button--sm">BUTTON</a><br><br><a href="https://cloudstack.apache.org/" target="_blank" rel="noopener noreferrer" class="button button--primary">BUTTON</a><br><br><a href="https://cloudstack.apache.org/" target="_blank" rel="noopener noreferrer" class="button button--primary button--lg">BUTTON</a><br><br><p>Buttons can also have colours depending on the class used, such as:</p><a href="https://cloudstack.apache.org/" target="_blank" rel="noopener noreferrer" class="button button--secondary">BUTTON</a><br><a href="https://cloudstack.apache.org/" target="_blank" rel="noopener noreferrer" class="button button--info">BUTTON</a><br><a href="https://cloudstack.apache.org/" target="_blank" rel="noopener noreferrer" class="button button--success">BUTTON</a><br><a href="https://cloudstack.apache.org/" target="_blank" rel="noopener noreferrer" class="button button--warning">BUTTON</a><br><a href="https://cloudstack.apache.org/" target="_blank" rel="noopener noreferrer" class="button button--danger">BUTTON</a><h2 class="anchor anchorWithStickyNavbar_LWe7" id="code-blocks">Code Blocks<a href="#code-blocks" class="hash-link" aria-label="Direct link to Code Blocks" title="Direct link to Code Blocks"></a></h2><p>Example of code block:</p><div class="codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain"># dnf install cloudstack-management</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="using-admonitions">Using Admonitions<a href="#using-admonitions" class="hash-link" aria-label="Direct link to Using Admonitions" title="Direct link to Using Admonitions"></a></h2><p>Refer to <a href="https://docusaurus.io/docs/2.3.1/markdown-features/admonitions" target="_blank" rel="noopener noreferrer">https://docusaurus.io/docs/2.3.1/markdown-features/admonitions</a></p><div class="theme-admonition theme-admonition-tip alert alert--success admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</div><div class="admonitionContent_S0QG"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href="#">this <code>link</code></a>.</p></div></div><div class="theme-admonition theme-admonition-info alert alert--info admonition_LlT9"><div class="admonitionHeading_tbUL"><span class="admonitionIcon_kALy"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></span>info</div><div class="admonitionContent_S0QG"><p>Some <strong>content</strong> with <em>Markdown</em> <code>syntax</code>. Check <a href="#">this <code>link</code></a>.</p></div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="other-examples">Other Examples<a href="#other-examples" class="hash-link" aria-label="Direct link to Other Examples" title="Direct link to Other Examples"></a></h2><blockquote><p>This is a quote</p><p>-By somebody</p></blockquote><p>In this sentence, here is how you <strong>bold</strong>, <em>italics</em> or <del>strike</del>.</p><p>Here is a horizontal line:</p><hr><p>Here is a list of things:</p><ul><li>Item1</li><li>Item2<ul><li>Item3</li></ul></li><li>Item4<ul><li>Item 5</li><li>Item 5<ul><li>Item 5</li></ul></li></ul></li></ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/apache/cloudstack-www/tree/main/docs/index.md" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_vwxv"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#working-with-the-website-pages-and-blogs" class="table-of-contents__link toc-highlight">Working with the Website, Pages and Blogs</a><ul><li><a href="#website" class="table-of-contents__link toc-highlight">Website</a></li><li><a href="#pages" class="table-of-contents__link toc-highlight">Pages</a></li><li><a href="#blog" class="table-of-contents__link toc-highlight">Blog</a></li></ul></li><li><a href="#contributing-changes-using-github" class="table-of-contents__link toc-highlight">Contributing Changes using GitHub</a></li><li><a href="#toc-on-blog-and-website-page" class="table-of-contents__link toc-highlight">ToC on blog and website page</a></li><li><a href="#images" class="table-of-contents__link toc-highlight">Images</a></li><li><a href="#buttons" class="table-of-contents__link toc-highlight">Buttons</a></li><li><a href="#code-blocks" class="table-of-contents__link toc-highlight">Code Blocks</a></li><li><a href="#using-admonitions" class="table-of-contents__link toc-highlight">Using Admonitions</a></li><li><a href="#other-examples" class="table-of-contents__link toc-highlight">Other Examples</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://cloudstack.apache.org/" rel="noopener noreferrer" class="footerLogoLink_BH7S"><img src="/img/ACS_logo_slogan.svg" alt="Apache CloudStack logo" class="themedImage_ToTc themedImage--light_HNdA footer__logo"><img src="/img/ACS_logo_slogan.svg" alt="Apache CloudStack logo" class="themedImage_ToTc themedImage--dark_i4oU footer__logo"></a></div><div class="footer__copyright"> |
| <div class="social"> |
| <a href="mailto:dev-subscribe@cloudstack.apache.org"> |
| <img src="/img/mail_mini_icon.svg" alt=""> |
| </a> |
| <a href="https://join.slack.com/t/apachecloudstack/shared_invite/zt-2aegc22z7-tPCxpptfcebTBtd59qcZSQ"> |
| <img src="/img/slack_mini_icon.svg" alt=""> |
| </a> |
| <a href="https://github.com/apache/cloudstack"> |
| <img src="/img/git_mini_icon.svg" alt=""> |
| </a> |
| <a href="https://twitter.com/CloudStack"> |
| <img src="/img/twitter_X_mini_icon.svg" alt=""> |
| </a> |
| <a href="https://www.youtube.com/@ApacheCloudStack"> |
| <img src="/img/youtube_mini_icon.svg" alt=""> |
| </a> |
| <a href="https://www.linkedin.com/company/apachecloudstack/posts/"> |
| <img src="/img/linkedin_icon.svg" alt=""> |
| </a> |
| </div> |
| <div class="footer-bottom">Copyright © 2023 The Apache |
| Software Foundation, Licensed under the Apache License, Version 2.0. |
| “Apache”, “CloudStack”, “Apache CloudStack”, the Apache CloudStack logo, |
| the Apache CloudStack Cloud Monkey logo and the Apache feather logos |
| are registered trademarks or trademarks of The Apache Software |
| Foundation. |
| <p class="footer-blue"><a href="/trademark-guidelines">Apache CloudStack Trademark Usage</a> - <a href="/bylaws">Apache CloudStack Community ByLaws</a> - <a href="https://github.com/apache/cloudstack-www">Website Source Code</a></p></div> |
| </div> |
| <br> |
| </div></div></footer></div> |
| <script src="/assets/js/runtime~main.60ecdf28.js"></script> |
| <script src="/assets/js/main.2d60fa8d.js"></script> |
| </body> |
| </html> |
