APITestRepo/Custom Domain on Github.html at main · Solonce/APITestRepo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<html>
 <head>
  <title>
   How to set up custom domain on github pages | Solonce
  </title>
  <meta charset="utf-8"/>
  <meta content="width=device-width; initial-scale=1.0;" name="viewport"/>
  <meta content="Step-by-step tutorial on setting up a custom domain for your GitHub Pages site, including DNS verification, TXT record setup, and configuring A and CNAME records. Learn how to set up your custom domain on GitHub Pages and get started with your own domain name." name="description"/>
  <link href="static/stylesheet.css" rel="stylesheet" type="text/css"/>
  <meta content="custom domain, github pages, dns, a record, cname record, domain setup, dns settings, github pages custom domain, github pages dns, github pages a record, github pages cname record" name="keywords"/>
 </head>
 <body>
  <canvas id="myCanvas" style="position: absolute;">
  </canvas>
  <div class="header">
   <nav>
    <ul>
     <li>
      <a class="header-item link" href="index.html">
       HOME
      </a>
      <a class="header-item link" href="about.html">
       ABOUT ME
      </a>
      <a class="link" href="contact.html">
       CONTACT
      </a>
     </li>
     <div class="header-divider">
     </div>
    </ul>
   </nav>
  </div>
  <div class="centered-element title-element" id="title">
   <p>
    SOLONCE
   </p>
   <p class="date" id="currentDateTime">
   </p>
  </div>
  <div class="main-divider">
  </div>
  <div class="article-container">
   <h1>
    <p class="article-title-head">
     Custom Domain on Github Pages
    </p>
   </h1>
   <h2>
    <p class="article-title-desc">
     Tutorial on how to set up your github pages site with a custom domain.
    </p>
   </h2>
  </div>
  <div class="article-body">
   <h3 class="title-in-text">
    How to set a custom domain for a website hosted on Github.
   </h3>
   <div>
    Its really quite a simple process, only requiring a few fields to be set up for it to properly function. We will be using
    <a href="https://name.com">
     name.com
    </a>
    to facilitate the domain hosting. However, so long you have access to a DNS Manager, you should be able to do this with any domain hosting service.
   </div>
   <br/>
   <br/>
   <p class="title-in-text">
    Getting a DNS TXT record from Github
   </p>
   <div>
    One of the first things will need to do is verify the DNS with Github. This can be done by traversing the menus in this manner.
   </div>
   <br/>
   <br/>
   <p class="code-snippet">
    Profile &gt; Settings &gt; Coding, Planning &amp; Automation &gt; Pages
   </p>
   <br/>
   <br/>
   <div>
    Then you’ll click
    <b>
     ‘Add a Domain’
    </b>
   </div>
   <br/>
   <br/>
   <div>
    Here you should be prompted with a field for you to enter your domain name. We will use ‘test.com’ as a test ust to show you the results.
   </div>
   <br/>
   <br/>
   <img src="../static/img/domainimg/txt_record.png" style="width: 85%"/>
   <br/>
   <div>
    You should be given some info like this. Keep this page open, and we’ll migrate to our DNS Manager.
   </div>
   <br/>
   <br/>
   <p class="title-in-text">
    Setting DNS 'TXT' records
   </p>
   <div>
    You’re going to want to open a new record set to type
    <b>
     ‘TXT’
    </b>
   </div>
   <br/>
   <br/>
   <img src="../static/img/domainimg/enter_txt_record.png" style="width:95%"/>
   <br/>
   <div>
    You’re going to put the first bit of text from github in the
    <b>
     ‘HOST’
    </b>
    field, and the second bit of text in the
    <b>
     ‘ANSWER’
    </b>
    field. You can leave TTL as is. Then youre going to want to add the record to your DNS.
   </div>
   <br/>
   <br/>
   <div>
    Then you can go back to Github and verify the DNS. This may take a few minutes, but this is all we need to do on this page for now, so we can go back to our DNS manager to set up a few
    <b>
     ‘A’
    </b>
    records.
   </div>
   <br/>
   <br/>
   <p class="title-in-text">
    Setting DNS 'A' records
   </p>
   <div>
    Github Pages has a few name servers that we need to setup with the DNS manager. These addresses are:
   </div>
   <br/>
   <div class="bullet">
    <p>
     - 185.199.108.153
     <br/>
     - 185.199.109.153
     <br/>
     - 185.199.110.153
     <br/>
     - 185.199.111.153
    </p>
   </div>
   <div>
    We will need to set an
    <b>
     ‘A’
    </b>
    record for each of these addresses. This is the same as before, but instead of a
    <b>
     ‘TXT’
    </b>
    record, its an
    <b>
     ‘A’
    </b>
    record. Just input each address into the
    <b>
     ‘ANSWER’
    </b>
    field. You can leave the
    <b>
     ‘HOST’
    </b>
    field empty, as it will auto populate with the domain name.
   </div>
   <br/>
   <br/>
   <img src="../static/img/domainimg/enter_a_record.png" style="width: 80%"/>
   <br/>
   <p class="title-in-text">
    Setting DNS 'CNAME' records
   </p>
   <div>
    Next, we will need to create a CNAME record for our DNS Manager.
   </div>
   <br/>
   <br/>
   <div>
    This is as simple as making any other record.
   </div>
   <br/>
   <br/>
   <img src="../static/img/domainimg/enter_cname_record.png" style="width: 80%"/>
   <br/>
   <div>
    All we need to do here, is under the
    <b>
     ‘TYPE’
    </b>
    field we input
    <b>
     ‘CNAME’
    </b>
    , and under the
    <b>
     ‘HOST’
    </b>
    field we input
    <b>
     ‘www’
    </b>
    , and in the
    <b>
     ‘ANSWER’
    </b>
    field, we input the github pages link to the webpage.
   </div>
   <br/>
   <br/>
   <p class="title-in-text">
    Setting Domain in Github
   </p>
   <div>
    Then, last step should just be setting up our CNAME file and setting our custom domain on our github page repo.
   </div>
   <br/>
   <br/>
   <div>
    To do this, we need to navigate to our page settings. This can be done with this menu traversal.
   </div>
   <br/>
   <br/>
   <p class="code-snippet">
    Repo &gt; Settings &gt; Code and Automation &gt; Pages
   </p>
   <br/>
   <br/>
   <div>
    Then, if we scroll down a bit, we will see an area for ‘Custom Domain’. We simply need to put in our domain name here. Ensure that there are no issues with our DNS records, and we are good to roll!
   </div>
   <br/>
   <br/>
   <img src="../static/img/domainimg/custom_domain_check.png" style="width:85%"/>
   <br/>
   <div>
    This make take a few minutes.
   </div>
   <br/>
   <br/>
   <img src="../static/img/domainimg/custom_domain_success.png" style="width:85%"/>
   <br/>
   <div>
    When we successfully set our domain name, the CNAME file will auto-generate in the repo.
   </div>
  </div>
  <div class="footer">
   <a href="https://github.com/Solonce">
    <button class="footer-button">
     <svg fill="none" height="64px" viewbox="0 0 24 24" width="64px" xmlns="http://www.w3.org/2000/svg">
      <g id="SVGRepo_bgCarrier" stroke-width="0">
      </g>
      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
      </g>
      <g id="SVGRepo_iconCarrier">
       <path d="M4.0744 2.9938C4.13263 1.96371 4.37869 1.51577 5.08432 1.15606C5.84357 0.768899 7.04106 0.949072 8.45014 1.66261C9.05706 1.97009 9.11886 1.97635 10.1825 1.83998C11.5963 1.65865 13.4164 1.65929 14.7213 1.84164C15.7081 1.97954 15.7729 1.97265 16.3813 1.66453C18.3814 0.651679 19.9605 0.71795 20.5323 1.8387C20.8177 2.39812 20.8707 3.84971 20.6494 5.04695C20.5267 5.71069 20.5397 5.79356 20.8353 6.22912C22.915 9.29385 21.4165 14.2616 17.8528 16.1155C17.5801 16.2574 17.3503 16.3452 17.163 16.4167C16.5879 16.6363 16.4133 16.703 16.6247 17.7138C16.7265 18.2 16.8491 19.4088 16.8973 20.4002C16.9844 22.1922 16.9831 22.2047 16.6688 22.5703C16.241 23.0676 15.6244 23.076 15.2066 22.5902C14.9341 22.2734 14.9075 22.1238 14.9075 20.9015C14.9075 19.0952 14.7095 17.8946 14.2417 16.8658C13.6854 15.6415 14.0978 15.185 15.37 14.9114C17.1383 14.531 18.5194 13.4397 19.2892 11.8146C20.0211 10.2698 20.1314 8.13501 18.8082 6.83668C18.4319 6.3895 18.4057 5.98446 18.6744 4.76309C18.7748 4.3066 18.859 3.71768 18.8615 3.45425C18.8653 3.03823 18.8274 2.97541 18.5719 2.97541C18.4102 2.97541 17.7924 3.21062 17.1992 3.49805L16.2524 3.95695C16.1663 3.99866 16.07 4.0147 15.975 4.0038C13.5675 3.72746 11.2799 3.72319 8.86062 4.00488C8.76526 4.01598 8.66853 3.99994 8.58215 3.95802L7.63585 3.49882C7.04259 3.21087 6.42482 2.97541 6.26317 2.97541C5.88941 2.97541 5.88379 3.25135 6.22447 4.89078C6.43258 5.89203 6.57262 6.11513 5.97101 6.91572C5.06925 8.11576 4.844 9.60592 5.32757 11.1716C5.93704 13.1446 7.4295 14.4775 9.52773 14.9222C10.7926 15.1903 11.1232 15.5401 10.6402 16.9905C10.26 18.1319 10.0196 18.4261 9.46707 18.4261C8.72365 18.4261 8.25796 17.7821 8.51424 17.1082C8.62712 16.8112 8.59354 16.7795 7.89711 16.5255C5.77117 15.7504 4.14514 14.0131 3.40172 11.7223C2.82711 9.95184 3.07994 7.64739 4.00175 6.25453C4.31561 5.78028 4.32047 5.74006 4.174 4.83217C4.09113 4.31822 4.04631 3.49103 4.0744 2.9938Z" fill="#0F0F0F">
       </path>
       <path d="M3.33203 15.9454C3.02568 15.4859 2.40481 15.3617 1.94528 15.6681C1.48576 15.9744 1.36158 16.5953 1.66793 17.0548C1.8941 17.3941 2.16467 17.6728 2.39444 17.9025C2.4368 17.9449 2.47796 17.9858 2.51815 18.0257C2.71062 18.2169 2.88056 18.3857 3.05124 18.5861C3.42875 19.0292 3.80536 19.626 4.0194 20.6962C4.11474 21.1729 4.45739 21.4297 4.64725 21.5419C4.85315 21.6635 5.07812 21.7352 5.26325 21.7819C5.64196 21.8774 6.10169 21.927 6.53799 21.9559C7.01695 21.9877 7.53592 21.998 7.99999 22.0008C8.00033 22.5527 8.44791 23.0001 8.99998 23.0001C9.55227 23.0001 9.99998 22.5524 9.99998 22.0001V21.0001C9.99998 20.4478 9.55227 20.0001 8.99998 20.0001C8.90571 20.0001 8.80372 20.0004 8.69569 20.0008C8.10883 20.0026 7.34388 20.0049 6.67018 19.9603C6.34531 19.9388 6.07825 19.9083 5.88241 19.871C5.58083 18.6871 5.09362 17.8994 4.57373 17.2891C4.34391 17.0194 4.10593 16.7834 3.91236 16.5914C3.87612 16.5555 3.84144 16.5211 3.80865 16.4883C3.5853 16.265 3.4392 16.1062 3.33203 15.9454Z" fill="#0F0F0F">
       </path>
      </g>
     </svg>
    </button>
   </a>
   <a href="index.html">
    <button class="footer-button">
     <svg fill="#000000" height="64px" viewbox="0 0 512 512" width="64px" xmlns="http://www.w3.org/2000/svg">
      <g id="SVGRepo_bgCarrier" stroke-width="0">
      </g>
      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
      </g>
      <g id="SVGRepo_iconCarrier">
       <path d="M192,1.42108547e-14 L384,153.6 L384,384 L213.333333,384 L213.333333,277.333333 L170.666667,277.333333 L170.666667,384 L1.42108547e-14,384 L1.42108547e-14,153.6 L192,1.42108547e-14 Z M192,53.3333333 L42.6666667,170.666667 L42.6666667,341.333333 L128,341.333333 L128,234.666667 L256,234.666667 L256,341.333333 L341.333333,341.333333 L341.333333,170.666667 L192,53.3333333 Z" fill-rule="evenodd" transform="translate(64 64)">
       </path>
      </g>
     </svg>
    </button>
   </a>
   <a href="https://www.linkedin.com/in/solomon-ince/">
    <button class="footer-button">
     <svg fill="none" height="64px" viewbox="0 0 24 24" width="64px" xmlns="http://www.w3.org/2000/svg">
      <g id="SVGRepo_bgCarrier" stroke-width="0">
      </g>
      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
      </g>
      <g id="SVGRepo_iconCarrier">
       <path d="M6.5 8C7.32843 8 8 7.32843 8 6.5C8 5.67157 7.32843 5 6.5 5C5.67157 5 5 5.67157 5 6.5C5 7.32843 5.67157 8 6.5 8Z" fill="#0F0F0F">
       </path>
       <path d="M5 10C5 9.44772 5.44772 9 6 9H7C7.55228 9 8 9.44771 8 10V18C8 18.5523 7.55228 19 7 19H6C5.44772 19 5 18.5523 5 18V10Z" fill="#0F0F0F">
       </path>
       <path d="M11 19H12C12.5523 19 13 18.5523 13 18V13.5C13 12 16 11 16 13V18.0004C16 18.5527 16.4477 19 17 19H18C18.5523 19 19 18.5523 19 18V12C19 10 17.5 9 15.5 9C13.5 9 13 10.5 13 10.5V10C13 9.44771 12.5523 9 12 9H11C10.4477 9 10 9.44772 10 10V18C10 18.5523 10.4477 19 11 19Z" fill="#0F0F0F">
       </path>
       <path clip-rule="evenodd" d="M20 1C21.6569 1 23 2.34315 23 4V20C23 21.6569 21.6569 23 20 23H4C2.34315 23 1 21.6569 1 20V4C1 2.34315 2.34315 1 4 1H20ZM20 3C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20Z" fill="#0F0F0F" fill-rule="evenodd">
       </path>
      </g>
     </svg>
    </button>
   </a>
  </div>
  <script src="getTime.js">
  </script>
 </body>
</html>