185 lines
20 KiB
HTML
185 lines
20 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" class="codeberg-design">
|
||
|
|
<head>
|
||
|
|
<!-- Meta tags -->
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
|
||
|
|
<meta name="viewport" content="width=device-width" />
|
||
|
|
|
||
|
|
<!-- Favicon and title -->
|
||
|
|
<link rel="icon" href="https://design.codeberg.org/favicon.ico">
|
||
|
|
<title>Codeberg Pages - static pages for your projects</title>
|
||
|
|
|
||
|
|
<!-- Codeberg Design CSS -->
|
||
|
|
<link rel="icon" href="https://design.codeberg.org/logo-kit/favicon.ico" type="image/x-icon" />
|
||
|
|
<link rel="icon" href="https://design.codeberg.org/logo-kit/favicon.svg" type="image/svg+xml" />
|
||
|
|
<link rel="apple-touch-icon" href="https://design.codeberg.org/logo-kit/apple-touch-icon.png" />
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://design.codeberg.org/design-kit/codeberg.css" />
|
||
|
|
<script defer src="https://design.codeberg.org/design-kit/codeberg.js"></script>
|
||
|
|
<script defer src="https://design.codeberg.org/components/codeberg-components.js"></script>
|
||
|
|
|
||
|
|
<link href="https://fonts.codeberg.org/dist/inter/Inter%20Web/inter.css" rel="stylesheet" />
|
||
|
|
<link href="https://fonts.codeberg.org/dist/fontawesome5/css/all.min.css" rel="stylesheet" />
|
||
|
|
</head>
|
||
|
|
<body data-dm-shortcut-enabled="true" data-set-preferred-mode-onload="true">
|
||
|
|
|
||
|
|
<!-- Page wrapper start -->
|
||
|
|
<div class="page-wrapper with-navbar">
|
||
|
|
|
||
|
|
<!-- Navbar start -->
|
||
|
|
<nav class="navbar">
|
||
|
|
<!-- Reference: https://www.gethalfmoon.com/docs/navbar -->
|
||
|
|
<!-- Navbar brand -->
|
||
|
|
<a href="https://codeberg.page" class="navbar-brand" title="Codeberg Design">
|
||
|
|
<img src="https://design.codeberg.org/logo-kit/icon_inverted.svg" alt="Codeberg">
|
||
|
|
Pages
|
||
|
|
</a>
|
||
|
|
<!-- Navbar nav -->
|
||
|
|
<ul class="navbar-nav d-none d-md-flex"> <!-- d-none = display: none, d-md-flex = display: flex on medium screens and up (width > 768px) -->
|
||
|
|
<li class="nav-item active">
|
||
|
|
<a href="" class="nav-link">Intro</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a href="https://docs.codeberg.org/codeberg-pages/" class="nav-link">Documentation</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<!-- Navbar content (with the dropdown menu) -->
|
||
|
|
<div class="navbar-content d-md-none ml-auto"> <!-- d-md-none = display: none on medium screens and up (width > 768px), ml-auto = margin-left: auto -->
|
||
|
|
<div class="dropdown with-arrow">
|
||
|
|
<button class="btn" data-toggle="dropdown" type="button" id="navbar-dropdown-toggle-btn-1">
|
||
|
|
Menu
|
||
|
|
<i class="fa fa-angle-down" aria-hidden="true"></i>
|
||
|
|
</button>
|
||
|
|
<div class="dropdown-menu dropdown-menu-right w-200" aria-labelledby="navbar-dropdown-toggle-btn-1"> <!-- w-200 = width: 20rem (200px) -->
|
||
|
|
<a href="" class="dropdown-item">Intro</a>
|
||
|
|
<a href="https://docs.codeberg.org/codeberg-pages/" class="dropdown-item">Documentation</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<!-- Navbar end -->
|
||
|
|
|
||
|
|
<!-- Content wrapper start -->
|
||
|
|
<div class="content-wrapper">
|
||
|
|
<!-- Container-fluid -->
|
||
|
|
<div class="container-fluid" style="--accent: #144b49">
|
||
|
|
<style>
|
||
|
|
.codeberg-hero {
|
||
|
|
padding: 5rem var(--content-and-card-spacing); display: flex; justify-content: center; background: var(--accent);
|
||
|
|
}
|
||
|
|
.codeberg-hero>div {
|
||
|
|
max-width: 80em; display: flex; align-items: center; color: #fff;
|
||
|
|
}
|
||
|
|
.codeberg-hero>div>div {
|
||
|
|
margin-left: var(--content-and-card-spacing);
|
||
|
|
}
|
||
|
|
.codeberg-hero h3 {
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
@media (max-width: 60em) {
|
||
|
|
.codeberg-hero>div {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.codeberg-hero>div>div {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-top: var(--content-and-card-spacing);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.codeberg-divider {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.codeberg-divider>hr { flex-basis: 50%; --lm-horizontal-rule-color: var(--lm-card-border-color); }
|
||
|
|
.codeberg-divider>hr:first-child { margin-right: 1rem; }
|
||
|
|
.codeberg-divider>hr:last-child { margin-left: 1rem; }
|
||
|
|
.codeberg-divider>:not(hr) {
|
||
|
|
flex: none;
|
||
|
|
}
|
||
|
|
.codeberg-number-circle {
|
||
|
|
width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
|
||
|
|
background: var(--accent);
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 1em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="codeberg-hero">
|
||
|
|
<div>
|
||
|
|
<svg style="flex: none; max-width: 100%;" width="418.1" height="163" viewBox="0 0 836.2 325.9" xmlns="http://www.w3.org/2000/svg"><style>.st0{fill:#6a737f}.st1{fill:#eef2f4}.st2{fill:#fff}.st3{fill:#003532}.st4{fill:#bbbfc2}.st5{fill:#28a8e0}.st6{opacity:.4;fill:#848484}.st7{fill:none;stroke:#444e59;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}.st8{opacity:.32;fill:#848484}.st9{fill:#afb1b2}.st10{fill:#aeaeaf}.st11{fill:#6567c3}.st12{opacity:.2;fill:#444e59}.st13{fill:none;stroke:#444e59;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}.st13,.st14{opacity:.2}.st15{opacity:9e-2}.st16{fill:#f09f54}.st17{fill:#ed8b3b}.st18{fill:#ff6c37}.st19{fill:#8d91db}.st20,.st21{fill:#beccd5;stroke:#444e59;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}.st21{opacity:.3;fill:none}.st22{opacity:.62;fill:#fff}.st23{opacity:.71;fill:#5d5d5d}.st24{opacity:.8;fill:#bbbfc2}.st25{opacity:.3}.st26,.st27{stroke-width:2}.st26{fill:none;stroke:#444e59;stroke-linejoin:round}.st27{stroke-dasharray:2.858,1.9053}.st27,.st28,.st29,.st30{fill:none;stroke:#444e59;stroke-linejoin:round}.st28{stroke-width:2;stroke-dasharray:3.0046,2.003}.st29,.st30{stroke-miterlimit:10}.st30{stroke-linecap:round}</style><path id="XMLID_1313_" class="st3" d="M825.1 323.9H11c-5 0-9-4-9-9s4-9 9-9h814.2c5 0 9 4 9 9-.1 5-4.1 9-9.1 9z"/><g id="XMLID_24_" transform="translate(-84.7 -342.4)"><path id="XMLID_6_" class="st3" d="M407.4 647.8h140.8v8.4H407.4z"/><g id="XMLID_104_"><path id="XMLID_76_" class="st4" d="M646 592.9H313.8c-6.6 0-12-5.4-12-12V358.4c0-6.6 5.4-12 12-12H646c6.6 0 12 5.4 12 12v222.4c0 6.7-5.3 12.1-12 12.1z"/><path id="XMLID_80_" class="st5" transform="rotate(90 480.6 459.78)" d="M389.8 303.5h181.7v312.6H389.8z"/><path id="XMLID_18_" class="st6" d="M646.8 592.9h-52.1v-94.8c0-7.6 6.1-13.7 13.7-13.7h38.4z"/><path id="XMLID_107_" class="st6" d="M327.1 501.3h-25.3V576c0 9.3 8 16.9 17.4 16.9h29.1v-70c-.1-11.7-9.6-21.6-21.2-21.6z"/><path id="XMLID_5_" class="st7" d="M647 592.9H314.2c-6.6 0-12-5.4-12-12V358.4c0-6.6 5.4-12 12-12H647c6.6 0 12 5.4 12 12v222.4c0 6.7-5.4 12.1-12 12.1z"/><path id="XMLID_7_" class="st7" transform="rotate(90 480.6 459.78)" d="M389.8 303.9h181.7v311.7H389.8z"/></g><path id="XMLID_179_" class="st8" d="M575.9 541.9H404.1c-3.9 0-7-3.2-7-7V412.3c0-3.9 3.2-7 7-7h171.8c3.9 0 7 3.2 7 7v122.5c0 3.9-3.1 7.1-7 7.1z"/><path id="XMLID_134_" class="st9" d="M567.9 535.1H396.1c-3.9 0-7-3.2-7-7V405.6c0-3.9 3.2-7 7-7h171.8c3.9 0 7 3.2 7 7v122.5c.1 3.9-3.1 7-7 7z"/><path id="XMLID_137_" class="st7" d="M567.9 535.1H396.1c-3.9 0-7-3.2-7-7V405.6c0-3.9 3.2-7 7-7h171.8c3.9 0 7 3.2 7 7v122.5c.1 3.9-3.1 7-7 7z"/><path id="XMLID_96_" class="st10" d="M522.5 647.8h-83.8l10.4-54.9h63z"/><path id="XMLID_99_" class="st8" d="M514.9 608.4l-2.8-15.5h-63l-2.8 15.5z"/><path id="XMLID_3_" class="st7" d="M522.5 647.8h-83.8l10.4-54.9h63z"/><circle id="XMLID_9_" class="st3" cx="480.1" cy="567.7" r="6.2"/><path id="XMLID_133_" class="st2" d="M553.8 522.5H382c-3.9 0-7-3.2-7-7V392.9c0-3.9 3.2-7 7-7h171.8c3.9 0 7 3.2 7 7v122.5c.1 3.9-3.1 7.1-7 7.1z"/><path id="XMLID_25_" class="st7" d="M553.8 522.5H382c-3.9 0-7-3.2-7-7V392.9c0-3.9 3.2-7 7-7h171.8c3.9 0 7 3.2 7 7v122.5c.1 3.9-3.1 7.1-7 7.1z"/><path id="XMLID_105_" class="st4" d="M560.9 407H375v-13.8c0-4 3.3-7.4 7.4-7.4H554c3.8 0 6.9 3.1 6.9 6.9z"/><path id="XMLID_26_" class="st7" d="M560.9 407H375v-13.8c0-4 3.3-7.4 7.4-7.4H554c3.8 0 6.9 3.1 6.9 6.9z"/><g id="XMLID_108_"><circle id="XMLID_106_" class="st3" cx="392.9" cy="396.5" r="3.3"/><circle id="XMLID_109_" class="st3" cx="403.8" cy="396.5" r="3.3"/><circle id="XMLID_120_" class="st3" cx="414.6" cy="396.5" r="3.3"/></g><path id="XMLID_122_" class="st11" d="M543.4 443.6H391.1c-1.1 0-2-.9-2-2v-21.3c0-1.1.9-2 2-2h152.3c1.1 0 2 .9 2 2v21.3c0 1.1-.9 2-2 2z"/><g id="XMLID_123_"><path id="XMLID_124_" class="st12" d="M434.9 470.3H391c-1.1 0-2-.9-2-2v-11.5c0-1.1.9-2 2-2h43.9c1.1 0 2 .9 2 2v11.5c0 1.1-.8 2-2 2z"/><path id="XMLID_125_" class="st13" d="M396.1 481.6h35.2"/><path id="XMLID_128_" cl
|
||
|
|
<div>
|
||
|
|
<h3>Host static websites with Codeberg Pages!</h3>
|
||
|
|
<p>It's quick, easy, free & fast - just put your open source project's homepage, developer blog or web experiment into a Git repository at <a style="color: inherit; opacity: 0.6" href="https://codeberg.org">Codeberg</a>, and we'll do the rest.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<div class="card" style="max-width: 80em; margin: 0 auto;">
|
||
|
|
<div class="row" style="gap: var(--content-and-card-spacing)">
|
||
|
|
<div class="col-lg text-center">
|
||
|
|
<h4>
|
||
|
|
<span class="codeberg-number-circle">1</span>
|
||
|
|
Set up your repository
|
||
|
|
</h4>
|
||
|
|
<p>
|
||
|
|
Create a public repository named <code class="code">pages</code> to make the site available at the main subdomain.
|
||
|
|
</p>
|
||
|
|
<div class="codeberg-divider"><hr>or<hr></div>
|
||
|
|
<p>
|
||
|
|
Create a branch <code class="code">pages</code> in a public repository:<br>
|
||
|
|
<code class="code">git switch --orphan pages</code><br><code class="code">git rm --cached -r .</code>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg text-center">
|
||
|
|
<h4>
|
||
|
|
<span class="codeberg-number-circle">2</span>
|
||
|
|
Upload your files
|
||
|
|
</h4>
|
||
|
|
<p>
|
||
|
|
Push your static content, HTML, style, fonts, images or anything else.
|
||
|
|
</p>
|
||
|
|
<!--<div class="codeberg-divider">or</div>
|
||
|
|
<p>
|
||
|
|
Push the source for your page based on any static site generator, and <a href="">compile it with Codeberg CI</a>.
|
||
|
|
</p>-->
|
||
|
|
</div>
|
||
|
|
<div class="col-lg text-center">
|
||
|
|
<h4>
|
||
|
|
<span class="codeberg-number-circle">3</span>
|
||
|
|
You're done!
|
||
|
|
</h4>
|
||
|
|
<p>
|
||
|
|
Access your new website using this link:<br>
|
||
|
|
<code class="code">https://USERNAME.codeberg.page[/REPOSITORY][/@BRANCH]</code>
|
||
|
|
</p>
|
||
|
|
<div class="codeberg-divider"><hr>or<hr></div>
|
||
|
|
<p>
|
||
|
|
To use a custom domain, create a file <code class="code">.domains</code> in your repository with the domain name you wish to use.
|
||
|
|
<br><br>
|
||
|
|
Then, add a DNS record for that domain:<br>
|
||
|
|
<code class="code">CNAME [[<i>branch</i>.]<i>repo</i>.]<i>user</i>.codeberg.page.</code>
|
||
|
|
<br><br>
|
||
|
|
Or for apex domains where CNAME doesn't work:<br>
|
||
|
|
<code class="code">ALIAS codeberg.page.</code><br>
|
||
|
|
<code class="code">TXT [[<i>branch</i>.]<i>repo</i>.]<i>user</i>.codeberg.page</code>
|
||
|
|
<br><br>
|
||
|
|
If ALIAS isn't supported, use A & AAAA instead:<br>
|
||
|
|
<code class="code">A 217.197.91.145</code><br>
|
||
|
|
<code class="code">AAAA 2001:67c:1401:20f0::1</code><br>
|
||
|
|
+ <code class="code">TXT</code> as above
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Content wrapper end -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- Page wrapper end -->
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|