{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/depoy-and-config-website-on-name-cheap-part-1","result":{"data":{"markdownRemark":{"id":"aa881e26-f5ad-5c5a-bf1a-4bbc83cb69d1","html":"<p>Trước giờ mình luôn muốn sở hữu 1 site cá nhân, nhưng vì mình <del>lười</del> không có thời gian nên đợt này nghỉ việc, ở nhà cách ly mới tìm hiểu để làm đc.</p>\n<p>Bài này mình chỉ hướng dẫn anh em cách config <strong>domain</strong> và <strong>web hosting</strong> mua trên namecheap (nên mặc định anh em đã có source code của riêng mình rồi nhé 🗿)</p>\n<h2 id=\"tại-sao-có-tutorial-này\" style=\"position:relative;\"><a href=\"#t%E1%BA%A1i-sao-c%C3%B3-tutorial-n%C3%A0y\" aria-label=\"tại sao có tutorial này permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Tại sao có tutorial này?</h2>\n<p>Mặc dù namecheap đã có <a href=\"https://www.namecheap.com/resource-center/tutorials/building-your-first-website/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">hướng dẫn</a> đầy đủ để build 1 website from scratch nhưng bơi 🏊 trong 1 đống document là k dễ dàng gì.</p>\n<p><img src=\"/media/swim.gif\" alt=\"Kid swimming\"></p>\n<p>Nên mình viết tutorial này để chia sẻ lại những gì mình đã làm và tìm hiểu trong <strong>2 ngày</strong> để <del>mình xem lại nhỡ sau này quên</del> giúp anh em có thể tự config site của mình nhanh hơn nhé 😄.</p>\n<h2 id=\"để-có-1-site-hoàn-chỉnh-cần-những-gì\" style=\"position:relative;\"><a href=\"#%C4%91%E1%BB%83-c%C3%B3-1-site-ho%C3%A0n-ch%E1%BB%89nh-c%E1%BA%A7n-nh%E1%BB%AFng-g%C3%AC\" aria-label=\"để có 1 site hoàn chỉnh cần những gì permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Để có 1 site hoàn chỉnh cần những gì?</h2>\n<p>Lúc đầu mình nghĩ chỉ cần mua 1 tên miền (<strong>domain</strong>) rồi đẩy code lên đó là xong. Nhưng k phải thế, 3 thứ cơ bản để chạy 1 website bao gồm: <strong>domain name</strong>, <strong>hosting</strong> và <strong>platform</strong></p>\n<ul>\n<li><strong>Domain name</strong> 🔍: là địa chỉ website của mình, vd: <em><a href=\"http://www.thepondhub.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">pondhub.com</a></em>, <em><a href=\"https://leohuynh.dev\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">leohuynh.dev</a></em> … Có thể hiểu đây như là địa chỉ nhà của mình, thay cho địa chỉ ip giúp ng khác dễ dàng tìm kiếm.</li>\n<li>\n<p><strong>Hosting</strong> 🏠: là nơi lưu trữ toàn bộ data và thông tin về website.</p>\n<blockquote>\n<p>— Web hosting, in the simplest term, is a remote hard drive connected to your computer by (you guessed it) the Internet.</p>\n</blockquote>\n</li>\n</ul>\n<p>Nếu domain là địa chỉ nhà thì hosting chính là ngôi nhà của mình.</p>\n<ul>\n<li><strong>Platform</strong> 💻: là những công cụ để build trang web, sản phẩm chính là phần source code của website.</li>\n</ul>\n<p>=> cần mua <strong>domain</strong> và <strong>hosting</strong> để có 1 trang hoàn chỉnh.</p>\n<p>Mình quyết định mua cả 2 trên namecheap <del>do chưa có nhiều kinh nghiệm</del> cho tiện config và có gì còn dễ hỏi support bên họ 😄.</p>\n<p>Anh em lên <a href=\"https://www.namecheap.com/domains/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://www.namecheap.com/domains/</a> (nhớ tạo account trc nhé), search domain, click <strong>Add To Cart</strong> thì namecheap sẽ gợi ý mua cùng <strong>Web Hosting</strong> và <strong>PositiveSSL</strong> (cái này để bảo mật cho site của mình, giải thích rõ hơn <a href=\"#activate-ssl-certificate\">ở dưới</a>).</p>\n<p><img src=\"/media/namecheap1.png\" alt=\"namecheap domain search\"></p>\n<p>Mua trên namecheap khá đơn giản, chỉ cần cung cấp đủ thông tin rồi 💸💸💸 thế là xong.</p>\n<p><img src=\"/media/bill.png\" alt=\"namecheap bill\"></p>\n<h2 id=\"connect-domain-với-hosting-như-thế-nào\" style=\"position:relative;\"><a href=\"#connect-domain-v%E1%BB%9Bi-hosting-nh%C6%B0-th%E1%BA%BF-n%C3%A0o\" aria-label=\"connect domain với hosting như thế nào permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Connect domain với hosting như thế nào?</h2>\n<p>Nhà và địa chỉ tất nhiên ở 1 nơi rồi, tại sao phải connect làm gì nữa 👀?</p>\n<p>Lí do đơn giản là vì địa chỉ nhà (<strong>Web hosting</strong>) thực chất là 1 dãy số (<strong>IP Address</strong>, vd: <strong>127.0.0.1</strong>) chúng ta đi đến địa chỉ này mới thực sự là truy cập vào website.</p>\n<p>=> cần connect <strong>domain name</strong> với <strong>hosting</strong> để có thể đến đúng nơi bằng địa chỉ dễ nhớ.</p>\n<p><img src=\"/media/dns.jpg\" alt=\"name cheap dns\"></p>\n<p>Khi mua <strong>domain</strong> và <strong>hosting</strong> cùng ở <strong>namecheap</strong>, việc config này sẽ rất dễ dàng</p>\n<ul>\n<li>Vào <strong>Account / Dashboard / Domain List</strong>, click <strong>Manage</strong> ở domain vừa mua</li>\n<li>Chọn <strong>Namecheap Web Hosting DNS</strong> ở section <strong>Nameservers</strong></li>\n<li>Click save (dấu ✔️ ở cuối dòng)</li>\n<li>Done</li>\n</ul>\n<p>Vậy tại sao truy cập vào <del><strong>domain name</strong></del> địa chỉ dễ nhớ hơn chúng ta vẫn đến đc nơi cần đến 👀??</p>\n<p>Chính là nhờ DNS (Mình k đi sâu vào khái niệm này)</p>\n<blockquote>\n<p>— DNS (domain name system) hiểu đơn giản là <strong><em>The Phone Book of the Internet</em></strong>, bạn hoàn toàn có thể bấm trực tiếp số (IP Address) để gọi cho gấu (hosting) hoặc tìm theo tên (domain) trong danh bạ.</p>\n</blockquote>\n<h2 id=\"activate-ssl-certificate\" style=\"position:relative;\"><a href=\"#activate-ssl-certificate\" aria-label=\"activate ssl certificate permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Activate SSL Certificate</h2>\n<p>Nếu anh em k mua <strong>PositiveSSL</strong> có thể bỏ qua phần này nhé.</p>\n<p><strong>SSL</strong> (Secure Sockets Layer) là 1 lớp bảo mật cho website, bảo vệ website bằng <strong>HTTPS</strong> với 2 nhiệm vụ chính:</p>\n<ul>\n<li>Đảm bảo data đến và đi từ website luôn đc mã hóa.</li>\n<li>Kiểm duyệt data đến và đi có nội dung chính xác.</li>\n</ul>\n<p><img src=\"/media/https.png\" alt=\"SSL certificate\"></p>\n<p>Trang nào có <strong>SSL Certificate</strong> sẽ đc gắn cờ <strong>Secured</strong> trên Web browser, đảm bảo sự tin tưởng khi truy cập.</p>\n<p>Mình sẽ hướng dẫn anh em cách đơn giản nhất đó là sử dụng <strong>cPanel</strong> của <strong>namecheap</strong>:</p>\n<p><img src=\"/media/cpanel.png\" alt=\"Go to cPanel\"></p>\n<ul>\n<li>Vào <strong>Account / Dashboard / Domain List</strong>, chọn tab <strong>Products</strong>.</li>\n<li>Click <strong>Go to cPanel</strong>, đăng nhập với tài khoản <strong>namecheap</strong>.</li>\n<li>Trong <strong>cPanel</strong> mở <strong>Namecheap SSL</strong>.</li>\n<li>Click <strong>Activate</strong> PossitiveSSL.</li>\n</ul>\n<p>Đợi khoảng 5-10’ rồi ấn <strong>sync</strong> để xem đã <strong>activate</strong> thành công chưa nhé (nếu chưa thì anh em đợi thêm rồi <strong>sync</strong> lại cho đến khi status chuyển sang <strong>active</strong> là đc).</p>\n<p><img src=\"/media/cpanel3.png\" alt=\"Go to cPanel\"></p>\n<h2 id=\"tạm-kết\" style=\"position:relative;\"><a href=\"#t%E1%BA%A1m-k%E1%BA%BFt\" aria-label=\"tạm kết permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Tạm kết</h2>\n<p>Đến đây anh em đã hoàn thiện đc 90% website của mình rồi 😮, <a href=\"/posts/deploy-and-config-website-on-namecheap-part-2\">phần tiếp theo</a> mình sẽ hướng dẫn <del>90%</del> 10% còn lại 😢 bao gồm:</p>\n<ul>\n<li>Tìm hiểu cấu trúc thư mục trên server (<strong>web hosting</strong>).</li>\n<li>Sử dụng <a href=\"https://filezilla-project.org/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">FileZilla</a> để đẩy code lên server.</li>\n<li>Set up 2FA (<strong>Two Factor Authentication</strong> - hay bảo mật 2 lớp) để tăng bảo mật.</li>\n</ul>\n<p>Rất cảm ơn anh em đã kiên nhẫn đọc đến đây 🙏, để lại suy nghĩ cho mình dưới phần bình luận nhé. Thanks you so much!</p>","fields":{"slug":"/posts/depoy-and-config-website-on-name-cheap-part-1","tagSlugs":["/tag/deployment/","/tag/domain/","/tag/hosting/","/tag/dns/","/tag/namecheap/"]},"frontmatter":{"date":"2020-04-23T16:20:03.284Z","description":"Trước giờ mình luôn muốn sở hữu 1 site cá nhân, nhưng vì mình không có thời gian nên đợt này nghỉ việc, ở nhà cách ly mới tìm hiểu để làm đc...","tags":["deployment","domain","hosting","dns","namecheap"],"title":"Deploy và cấu hình website trên namecheap trong vòng 1 nốt nhạc [Part 1]","socialImage":"https://images.unsplash.com/photo-1505238680356-667803448bb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80","headerImage":"https://images.unsplash.com/photo-1505238680356-667803448bb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"},"timeToRead":5}},"pageContext":{"slug":"/posts/depoy-and-config-website-on-name-cheap-part-1"}}}