2021-12-01 22:54:04 +00:00
<!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 >
2021-12-01 23:53:17 +00:00
< 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 : 9 e-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
2021-12-01 22:54:04 +00:00
< div >
< h3 > Host static websites with Codeberg Pages!< / h3 >
2022-02-06 20:36:26 +00:00
< 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 >
2021-12-01 22:54:04 +00:00
< / 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 >
2022-01-10 16:04:02 +00:00
Create a public repository named < code class = "code" > pages< / code > to make the site available at the main subdomain.
2021-12-01 22:54:04 +00:00
< / p >
< div class = "codeberg-divider" > < hr > or< hr > < / div >
< p >
2023-03-11 02:22:34 +00:00
Create a branch < code class = "code" > pages< / code > in a public repository:< br >
2022-07-27 15:26:55 +00:00
< code class = "code" > git switch --orphan pages< / code > < br > < code class = "code" > git rm --cached -r .< / code >
2021-12-01 22:54:04 +00:00
< / 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 >
2023-03-11 03:35:15 +00:00
To use a custom domain, create a file < code class = "code" > .domains< / code > in your repository with the domain name you wish to use.
2021-12-02 08:38:16 +00:00
< br > < br >
2023-03-11 03:35:15 +00:00
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 >
2021-12-01 22:54:04 +00:00
< br > < br >
2023-03-11 03:35:15 +00:00
Or for apex domains where CNAME doesn't work:< br >
< code class = "code" > ALIAS codeberg.page.< / code > < br >
2021-12-01 22:54:04 +00:00
< code class = "code" > TXT [[< i > branch< / i > .]< i > repo< / i > .]< i > user< / i > .codeberg.page< / code >
2021-12-10 14:01:26 +00:00
< br > < br >
2023-03-11 03:35:15 +00:00
If ALIAS isn't supported, use A & AAAA instead:< br >
2021-12-10 14:01:26 +00:00
< code class = "code" > A 217.197.91.145< / code > < br >
< code class = "code" > AAAA 2001:67c:1401:20f0::1< / code > < br >
2021-12-11 01:11:20 +00:00
+ < code class = "code" > TXT< / code > as above
2021-12-01 22:54:04 +00:00
< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Content wrapper end -->
< / div >
<!-- Page wrapper end -->
< / body >
< / html >
